CSS @keyframes- reël
Voorbeeld
Laat 'n element geleidelik 200px af beweeg:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die @keyframesreël spesifiseer die animasiekode.
Die animasie word geskep deur geleidelik van een stel CSS-style na 'n ander te verander.
Tydens die animasie kan jy die stel CSS-style baie keer verander.
Spesifiseer wanneer die stylverandering in persentasie sal plaasvind, of met die sleutelwoorde "van" en "tot", wat dieselfde is as 0% en 100%. 0% is die begin van die animasie, 100% is wanneer die animasie voltooi is.
Wenk: Vir die beste blaaierondersteuning moet jy altyd beide die 0%- en die 100%-kiesers definieer.
Let wel: Gebruik die animasie-eienskappe om die voorkoms van die animasie te beheer, en ook om die animasie aan keurders te bind.
Let wel: Die !important-reël word in 'n sleutelraam geïgnoreer (Sien laaste voorbeeld op hierdie bladsy).
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die reël ten volle ondersteun.
Nommers gevolg deur -webkit-, -moz- of -o- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
| 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-sintaksis
@keyframes animationname {keyframes-selector {css-styles;}}
Eiendomswaardes
| 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 voorbeelde
Voorbeeld
Voeg baie sleutelraamkiesers by in een animasie:
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Voorbeeld
Verander baie CSS-style in een animasie:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Voorbeeld
Baie sleutelraamkiesers met baie CSS-style:
@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 wel: Die !important-reël word in 'n sleutelraam geïgnoreer:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
Verwante bladsye
CSS-tutoriaal: CSS-animasies