CSS @keyframes- regel
Voorbeeld
Laat een element geleidelijk 200px naar beneden bewegen:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De @keyframesregel specificeert de animatiecode.
De animatie wordt gemaakt door geleidelijk van de ene set CSS-stijlen naar de andere te gaan.
Tijdens de animatie kunt u de set CSS-stijlen vele malen wijzigen.
Specificeer wanneer de stijlverandering zal plaatsvinden in procenten, of met de trefwoorden "van" en "naar", wat hetzelfde is als 0% en 100%. 0% is het begin van de animatie, 100% is wanneer de animatie voltooid is.
Tip: Voor de beste browserondersteuning moet u altijd zowel de 0%- als de 100%-selectors definiëren.
Opmerking: gebruik de animatie-eigenschappen om het uiterlijk van de animatie te bepalen en ook om de animatie aan selectors te binden.
Let op: De !important regel wordt genegeerd in een keyframe (zie laatste voorbeeld op deze pagina).
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de regel volledig ondersteunt.
Getallen gevolgd door -webkit-, -moz- of -o- specificeren de eerste versie die met een prefix werkte.
| Property | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
CSS-syntaxis
@keyframes animationname {keyframes-selector {css-styles;}}
Eigendomswaarden
| Value | Description |
|---|---|
| animationname | Required. Defines the name of the animation. |
| keyframes-selector | Required. Percentage of the animation duration. Legal values: 0-100% Note: You can have many keyframes-selectors in one animation. |
| css-styles | Required. One or more legal CSS style properties |
Meer voorbeelden
Voorbeeld
Voeg veel keyframe-selectors toe in één animatie:
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Voorbeeld
Verander veel CSS-stijlen in één animatie:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Voorbeeld
Veel keyframe-selectors met veel CSS-stijlen:
@keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
Voorbeeld
Let op: De !important regel wordt genegeerd in een keyframe:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-animaties