Over @keyframes
De term "keyframe" is afkomstig uit de wereld van de (teken-)film. Het definieert de begin- en eindpunten van een vloeiende overgang. Een aantal keyframes achter elkaar beschrijft de beweging die de toeschouwer te zien krijgt.
Keyframes zijn punten op een tijdlijn. Er is een aantal beeldjes (frames) tussen de tijdstippen. Die tussenliggende beeldjes
(de "inbetweens") worden door de browser berekend en tussen de keyframes gezet.
De browser verdeelt de beweging als een Bézier-kromme
over de inbetweens. Je kunt opgeven hoe de Bézierkromme er uit moet zien. Als je niets opgeeft wordt "ease"
gebruikt (zie verder).
CSS heeft een voorziening om keyframes op te geven: @keyframes. Daarmee leg je punten op de tijdlijn vast zodat de browser de animatie kan renderen. De syntax is:
@keyframes ident { CSS-regels die dit keyframe bepalen
plaats eerste keyframe {} CSS-regels die dit keyframe bepalen
plaats tweede keyframe {} CSS-regels die dit keyframe bepalen
.
.
.
plaats laatste keyframe {}
}
De plaats van een keyframe geef je op als percentage van de looptijd van de animatie. Geldige waarden zijn:
• 0% tot 100%. Als je bijvoorbeeld 25% opgeeft in een animatie van 8 sec., staat het keyframe dus op 2 sec.
• from. Dit is hetzelfde als 0%.
• to. Dit is hetzelfde als 100%.
Je refereert aan @keyframes vanuit een "gewone" CSS-regel met:
animation-name: ident;
De koppeling is de naam ident.
Via de CSS-regel animate kun je nog veel meer invloed op de animatie uitoefenen. Zie dit Voorbeeld:
Hier rechts staat een rechthoek. Die is oorspronkelijk zeegroen van kleur. Een paar seconden na het laden van deze pagina
begint deze te verkleuren. Hij wordt langzaamaan lichtrood en springt dan weer terug op groen.
Dat doe je met deze code:
Laad zonodig de pagina opnieuw om het effect te zien.
<style>
#voorbeeld1 { width:40px; height:60px; float:right; margin-left:20px;
border:1px solid black;
background-color: teal;
animation-name: vb1;
animation-delay: 5s;
animation-duration: 10s;
}
@keyframes vb1 {
from {background-color:teal;}
to {background-color:#fcc;}
}
</style>
• Na afloop van de animatie springt de rechthoek weer terug naar de oorspronkelijke situatie, tenzij je animation-fill-mode:forwards opgeeft.
• In dit voorbeeld is gebruik gemaakt van from en to. Daarmee zet je een keyframe aan het begin van
de tijdlijn en een aan het eind van de tijdlijn (dat is eerder in dit artikel al uitgewerkt).
Een overzicht van de mogelijkheden van animation vind je in onderstaande lijst.
| Naam | Betekenis | |
| animation-delay | Specificeert een wachttijd voordat de animatie
wordt gestart, in seconde [s] of milliseconde [ms]. Default: 0. Hier: 5s. |
|
| animation-direction | Specificeert de richting (op te tijdlijn)
waarin de animatie wordt afgespeeld. Default: normal. Andere mogelijkheden zijn: • reverse De animatie wordt in omgekeerde richting afgespeeld. • alternate De animatie wordt eerst 'normal' afgespeeld, daarna 'reverse', daarna weer 'normal', dan weer 'reverse', enzovoort. • alternate-reverse De animatie wordt eerst 'reverse' afgespeeld, daarna 'normal', daarna weer 'reverse', dan weer 'normal', enzovoort. Hier: default. |
|
| animation-duration | Specificeert die tijd die nodig is
voor één cyclus van de animatie, in seconde [s] of milliseconde [ms]. Default: 0. Hier: 10s. Als je animation-duration niet opgeeft heeft die de lengte 0. Er is dan geen animatie! |
|
| animation-fill-mode | Specificeert de eigenschappen aan het
einde van de animatie. Default: none. Andere mogelijkheden zijn: • forwards Als de animatie eindigt wordt de style op het element toegepast die geldt op het moment dat de animatie klaar is. • backwards Als de animatie eindigt wordt de style op het element toegepast die geldt op het moment dat de animatie begint. • both Dit is een combinatie van forwards en backwards. Hier: default. |
|
| animation-iteration-count | Specificeert het aantal keren
dat een animatie wordt afgespeeld. Default: 1. Je kunt hier ook infinite opgeven. Dan wordt de animatie oneindig herhaald. Hier: default. |
|
| animation-name | Specificeert de naam van een @keyframes blok.
Default: none. Dat betekent dat de animatie niet wordt uitgevoerd. Het default lijkt vreemd, maar is dat niet. Je kunt verschillende @keyframes-blokken maken en dan met JavaScript er een of meerdere starten. Hier: vb1. |
|
| animation-play-state | Hiermee kun je (via bijv. :hover
of met JavaScript) onderzoeken of een animatie loopt of gepauzeerd is. Default: running. Je kunt hiermee (op dezelfde manier) een lopende animatie onderbreken (door paused op te geven) of juist verder laten gaan (door running in te stellen). Hier: default. |
|
| animation-timing-function | Specificeert het snelheidsverloop
van de animatie. Default: ease. Andere mogelijkheden zijn: • linear. De snelheid is constant over de looptijd van de animatie. • ease. De animatie start langzaam, gaat daarna snel en eindigt langzaam. • ease-in. De animatie start langzaam, gaat daarna snel en eindigt snel. • ease-out. De animatie start snel en eindigt langzaam. • ease-in-out. De animatie start langzaam, gaat daarna snel en eindigt langzaam. • step-start. Gelijkwaardig aan steps(1,start). • step-end. Gelijkwaardig aan steps(1,end). • steps(x,key). Specificeert het aantal stappen x in de animatie. De parameter x is een geheel getal ≥ 0. De parameter key is start of end. Het specificeert of de eigenschappen worden aangepast aan het begin of het einde van elke stap. Deze parameter is optioneel. Als key wordt weggelaten wordt end gebruikt. • cubic-bezier(n,n,n,n). Hiermee stel je een Bézierkrommme van de derde orde in. De animatie wordt uitgevoerd volgens die kromme. Je geeft vier parameters op. Dit zijn elk getallen 0 ≤ n ≤ 1. Er is geen default voor n. Als je dit niet opgeeft wordt een van de keywords hierboven gebruikt; als je die ook niet opgeeft wordt ease gebruikt. N.B.: De keywords met ease er in zijn voorgedefinieerde Bézierkrommmen. Hier: default. |
Er bestaat ook een verkorte versie van animation, waarin je de achtereenvolgende deel-eigenschappen (in deze volgorde) opsomt:
animation: name duration timing-function delay iteration-count direction fill-mode
play-state;
Je kunt keyframes maken op elk gewenste plek op de tijdlijn van de animatie.
Recente releases van alle grote browsers ondersteunen keyframes. Sommige oudere browsers hebben nog de Vendor-prefix -webkit- nodig.
Opmerking:
De CSS-opdracht animation is wat anders dan transition, hoewel ze veel op elkaar lijken. Een item over transitions
vind je HIER.
