CSS-animaties maken: keyframes, eigenschappen en shorthand

In een van mijn artikelen zag je hoe je met de CSS-eigenschap transition eenvoudige animaties maakt: een eigenschap van de ene waarde naar de andere laten lopen via CSS3-transities. Toch geven CSS3-transities je weinig controle over hoe de animatie in de tijd verloopt.

Met de CSS-eigenschap animation maak je daarentegen animaties met keyframes (@keyframes).

CSS3-animaties maken

Met CSS-animaties bouw je animaties op basis van keyframes, waarmee je vastlegt hoe CSS-eigenschappen in de tijd veranderen, net als bij flash-animaties.

De eerste stap bij het maken van een CSS-animatie is de losse keyframes definiëren en de animatie een naam geven in de @keyframes-declaratie.
De tweede stap is de keyframes bij naam aanroepen met de eigenschap animation-name, en daarnaast de eigenschap animation-duration toevoegen plus andere optionele animatie-eigenschappen om het gedrag van de animatie te sturen.

Overigens hoef je de volledige regel keyframes niet te definiëren voordat je ernaar verwijst of ze toepast.

Het voorbeeld hieronder laat zien hoe je een <div> horizontaal van de ene positie naar de andere animeert met de eigenschap css animation.

See the Pen
[1] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark

Je moet minstens twee eigenschappen opgeven om de animatie te laten lopen: animation-name en animation-duration (groter dan 0). Alle andere animatie-eigenschappen zijn optioneel: hun standaardwaarden verhinderen een animatie niet.

Let op: niet elke CSS-eigenschap is animeerbaar. Doorgaans is elke CSS-eigenschap die waarden in de vorm van getallen, lengtes, percentages of kleuren accepteert wel animeerbaar.

Keyframes definiëren

Met keyframes leg je de waarden van de animatie-eigenschappen in verschillende stadia van de animatie vast. Keyframes geef je op met een aparte CSS-stijlregel: @keyframes. De keyframeselector van zo’n stijlregel begint met een percentage (%) of met het sleutelwoord from (vanaf 0%) of to (vanaf 100%). Met die selector bepaal je waar in de duur van de animatie een keyframe valt.

De percentages staan voor een percentage van de duur van de animatie. 0% is het startpunt van de animatie, 100% het eindpunt, 50% het midden, enzovoort. Met andere woorden: een keyframe op 50% in een animatie van 2 seconden valt na 1 seconde.

See the Pen
[2] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark

De shorthand animation

Bij het maken van animaties komen er heel wat eigenschappen kijken. Je kunt ze ook allemaal in één enkele eigenschap opgeven en zo je code inkorten.

De eigenschap animation is een shorthand waarmee je alle afzonderlijke animatie-eigenschappen in één keer instelt, in de aangegeven volgorde. Bijvoorbeeld:

See the Pen
[3] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark

Let op: ontbreekt een waarde of geef je ze niet op, dan geldt de standaardwaarde van die eigenschap. Ontbreekt bijvoorbeeld de waarde van animation-duration, dan treedt er geen enkele overgang op, want de standaardwaarde is 0.

CSS3-animatie-eigenschappen

De tabel hieronder geeft een kort overzicht van alle css animation-eigenschappen die met animatie te maken hebben.

Eigenschap	Beschrijving
animation	Een shorthand om alle animatie-eigenschappen in één declaratie te zetten.
animation-name	Geeft de naam op van de met @keyframes gedefinieerde animaties die op het geselecteerde element moeten worden toegepast.
animation-duration	Geeft op hoeveel seconden of milliseconden één cyclus van de animatie duurt.
animation-timing-function	Geeft op hoe de animatie tijdens de duur van elke cyclus verloopt, oftewel de easingfuncties: ease-in, ease-out, ….
animation-delay	Geeft op wanneer de animatie begint.
animation-iteration-count	Geeft op hoe vaak een animatiecyclus moet worden afgespeeld voordat hij stopt.
animation-direction	Geeft aan of de animatie op afwisselende cycli achterstevoren moet worden afgespeeld.
animation-fill-mode	Geeft op hoe een CSS-animatie stijlen op haar doel toepast vóór en na de uitvoering.
animation-play-state	Geeft op of de animatie loopt of gepauzeerd is.
@keyframes	Geeft de waarden van de animatie-eigenschappen op verschillende momenten in de animatie op.