Animaties op je site met CSS3

Gepubliceerd op 31 augustus 2015Leestijd: 4 minuten

Om het gebruik van je site aantrekkelijker te maken of om bepaalde onderdelen bij je bezoekers onder de aandacht te brengen, kan je gebruikmaken van animations in CSS3. Hierdoor optimaliseer je de B2B Webdesign. Met deze mogelijkheid van CSS zorg je ervoor dat elementen op je pagina kunnen bewegen.

Waarom animaties?

De gebruikservaring van een bezoek verbeteren: met animaties kan je bepaalde handelingen, net als met transitions, vloeiend laten verlopen. Een succesvolle site is een aantrekkelijke site.
Onderdelen van je website of webshop onder de aandacht van de bezoeker brengen: Bij bepaalde gebeurtenissen (bijvoorbeeld een nieuw bericht of een voorraadupdate) wil je dat dit duidelijk is voor de bezoeker. Door alleen de opmaak te wijzigen, zorg je daar voor, door samen met animatie, valt het meer op.
Er zijn andere technieken om elementen te animeren (bijvoorbeeld Javascript of afbeeldingen), maar CSS3 is hiervoor geoptimaliseerd, zodat de overgangen soepel verlopen.

Animaties toepassen

Een animatie voeg je toe aan een element door keyframes te definiëren en deze te koppelen aan het element in de stylesheet. De animatie zal meteen starten als deze is toegewezen. Zie onderstaand voorbeeld:

HTML:

<ul>

</ul>

</div>

CSS:

li{

list-style: none;

margin: 0;

padding: 0;

font-size: 24px;

}

.fa-home{

padding: 20px;

border: 1px solid #000;

border-radius: 24px;

}

.fa-home{

animation-name: popout;

animation-duration: 0.4s;

animation-direction: alternate;

animation-iteration-count: infinite;

}

@keyframes popout{

from{

font-size: 100%;

}

to{

font-size: 200%;

}

Bekijk de code op JSFiddle om het voorbeeld realtime te zien.

In dit voorbeeld wordt gebruik gemaakt van een Home-icoon van FontAwesome om knop te maken die bij een bepaalde actie van de gebruiker geanimeerd wordt. Nu is deze animatie nog oneindig en wordt deze onmiddellijk gestart.

De animatie wordt gekoppeld aan elementen met class name .fa-home via de opmaakregel animation-name. Onderaan de stylesheet wordt een keyframe gedefinieerd met dezelfde naam. Een keyframe bestaat uit regels die aangeven, via percentages, wanneer gedurende een animatie een opmaakregel moet zijn toegepast op een element. 0% is het begin van de animatie, 100% het einde; deze twee waardes zijn ook toe te passen via de woorden from en to.

De duur van een animatie bepaal je met de regel animation-duration en geef je aan in seconden. In het voorbeeld staat de keyframeregel 100% gelijk aan 0.4 seconden.

Een animatie zal één keer uitgevoerd worden, maar dat kan worden aangepast met de regel animation-iteration-count, waarvan de waarde een cijfer kan zijn, maar ook infinite, waarmee de animatie oneindig doorgaat.

Een animatie zal normaal gesproken eindigen bij 100% en daarna in een keer de stijlregels voordat de animatie begon, toepassen. Met animation-direction: alternate geef je aan dat de volgende iteratie begint bij 100% en eindigt bij 0%. Bovenstaand voorbeeld zou ook bereikt worden door font-size:200% toe te passen bij keyframe-regel 50% en bij 100% weer terug te keren naar de aanvankelijke staat.

Events

De animaties vuren events af als ze beginnen en eindigen of als een iteratie is afgelopen en deze events kan je gebruiken in Javascript om een bepaalde handeling uit te voeren, bijvoorbeeld code uitvoeren of een CSS-klasse toe te passen:

Javascript:

$('.fa-home').bind('animationstart', function(e){

$(this).removeClass('active');

});

$('.fa-home').bind('animationend', function(e){

$(this).addClass('active');

});

CSS:

li{

list-style: none;

margin: 0;

padding: 0;