Animeer afbeeldingen of objecten

Animeer de inhoud van webpagina-elementen met CSS-animatie en selectors

Zoals te zien op de website van Art Attackk

1. HTML-document

Je start het project met het HTML-document waarin je de head- en body-sectie definieert. In de headsectie staan items die niet op de pagina zichtbaar zijn; in dit geval zijn het een link naar een CSS-bestand en een beschrijving. In de body-sectie staan elementen die wel zichtbaar zijn. Die voeg je in de volgende stap toe.

 
 

  Animation Effect
    href=”styles.css” />
 
 
  *** STAP 2
 
 

2. Inhoud

Het voorbeeld bestaat uit de drie letters A, B en C waarop je een animatie-eff ect toepast. Elke letter is opgenomen in een snap-element waarop je klasse- attributen toepast. Deze attributen definiëren de weergave-instellingen van de letters, evenals een beschrijving van de animaties.

 A
  B
  C

3. Stylesheet

Nu het HTML-document klaar is, maak je de stylesheet styles.css met de CSS-regels. Je begint dit document met de algemene opmaakinstellingen voor de HTML- en de body-containers. In dit voorbeeld stel je een donkere achtergrond met lichte letters in. Het font is Helvetica en er zijn geen marges of padding.

 html,body{
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Helvetica, sans-serif;
background: rgb(21, 34, 47);
  color: #fff;
  }

4. Grote letters

In het voorbeeld gebruik je grote letters waarop je de animatie-eff ecten toepast. Je stelt de grootte van de letters in met de klasse ‘big’, waarin je het font drie keer groter maakt dan het standaardformaat. Door tegelijkertijd de marge aan alle kanten in te stellen op het formaat van drie tekstelementen, kun je elk element goed apart zien.

 .big{
  font-size: 3em;
  margin: 3em;
  }

5. Standaard instellingen

Elk element deelt een aantal standaardinstellingen die voor al hun animaties gelden. Om herhaling te voorkomen, definieer je deze standaard instellingen als onderdeel van de klasse-animatie. Deze elementen moeten relatieve positionering gebruiken, zodat je de before-animatie ten opzichte van deze elementen kunt positioneren. Voor de before-elementen pas je instellingen voor hun rand, formaat, kleur en animatie toe die hun standaard worden.

 .animation{
  display: inline-block;
  position: relative;
  }
  .animation::before{
  content: “”;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid #ccf;
  box-sizing: border-box;
  animation: 1s infinite;
  }

6. Animatie-instellingen per letter

Nu je de standaard animatie hebt gedefinieerd, pas je de individuele animatie-instellingen op de letters toe. Elk element heeft een klassenaam A, B of C, waar je in combinatie met de klasse ‘animation’ naar kunt verwijzen. Je geeft de naam aan van de animatie die je wilt gebruiken, samen met andere unieke instellingen. In dit voorbeeld gebruik je de animatie ‘ping’ voor alle elementen, maar heeft elke letter een eigen geanimeerde rand.

 .animation.A::before{
  animation-name: ping;
  }
  .animation.B::before{
  animation-name: ping;
  border-style: dashed;
  }
  .animation.C::before{
  animation-name: ping;
  border-style: double;
  }

7. Animatie definiëren

Tot slot definieer je de animatie ‘ping’. In dit geval heeft de animatie twee frames. In het eerste frame is de rand een kwart van de huidige fontgrootte breed en is die volledig zichtbaar. De rand van het tweede frame heeft een breedte van 0 en is transparant. De before-elementen animeren tussen deze twee toestanden om een ‘ping’-effect te geven.

 @keyframes ping {
  0% {border-width: .25em; opacity: 1;}
  100% {border-width: 0; opacity: 0;}

Deel dit artikel of reageer