Exemplu
Asigurați-un element de a muta treptat 200px jos:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Regula @keyframes specifică codul de animație.
Animația este creată prin schimbarea treptat de la un set de stiluri CSS la alta.
În timpul animație, puteți schimba setul de stiluri CSS de multe ori.
Se specifică atunci când schimbarea stilului se va întâmpla în procente, sau cu cuvintele cheie "from" de "to" "from" și "to" , care este același cu 0% și 100%. 0% este începutul animație, 100% este când animația este completă.
Sfat: Pentru cel mai bun sprijin browser - ul, ar trebui să definiți întotdeauna atât de 0% și selectorii 100%.
Note: Utilizați proprietăți de animație pentru a controla aspectul de animație, și , de asemenea , pentru a lega animație selectoare.
Suport pentru browser-
Numerele din tabel specifică prima versiune de browser care acceptă pe deplin regula.
Numerele urmat de -webkit-, -moz- sau -o- specifica prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9 4.0 -webkit- | 30.0 15,0 -webkit- 12,0 -o- |
CSS Sintaxa
@keyframes Valori de proprietate Valoare Descriere animationname Necesar. Definește numele animației. keyframes-selector Necesar. Procentul de durata de animație. Valorile legale:
0-100%
din (same as 0%)
la (same as 100%) la (same as 100%)
Note: Puteți avea mai multe keyframes-selectoare într - o singură animație.
css-styles Necesar. Una sau mai multe proprietăți legale de stil CSS
Mai multe exemple
Exemplu
Adăugați multe selectoare cadrelor cheie într-o singură animație:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Încearcă - l singur »
Exemplu
Schimbarea multe stiluri CSS într-o singură animație:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Încearcă - l singur »
Exemplu
Multe selectoare cu mai multe stiluri ale cadrelor cheie CSS:
/* Chrome, Safari, Opera */
@-webkit-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;}
}
/* Standard syntax */
@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;}
}
Încearcă - l singur »
Pagini similare
Tutorial CSS3: CSS3 Animații