Pravidlo CSS @keyframes
Příklad
Postupně posunujte prvek o 200 pixelů dolů:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Pravidlo @keyframesurčuje kód animace.
Animace vzniká postupným přecházením z jedné sady stylů CSS do druhé.
Během animace můžete sadu stylů CSS mnohokrát změnit.
Určete, kdy ke změně stylu dojde v procentech nebo pomocí klíčových slov „od“ a „do“, což je stejné jako 0 % a 100 %. 0 % je začátek animace, 100 % je, když je animace dokončena.
Tip: Pro nejlepší podporu prohlížeče byste měli vždy definovat oba selektory 0% a 100%.
Poznámka: Vlastnosti animace použijte k ovládání vzhledu animace a také k navázání animace na selektory.
Poznámka: Pravidlo !important je v klíčovém snímku ignorováno (viz poslední příklad na této stránce).
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která toto pravidlo plně podporuje.
Čísla následovaná -webkit-, -moz- nebo -o- určují první verzi, která pracovala s předponou.
| 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- |
Syntaxe CSS
@keyframes animationname {keyframes-selector {css-styles;}}
Hodnoty vlastností
| 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 |
Další příklady
Příklad
Přidejte mnoho selektorů klíčových snímků do jedné animace:
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Příklad
Změňte mnoho stylů CSS v jedné animaci:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Příklad
Mnoho selektorů klíčových snímků s mnoha styly CSS:
@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;}
}
Příklad
Poznámka: Pravidlo !important je v klíčovém snímku ignorováno:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
Související stránky
CSS tutoriál: CSS animace