CSS @ regola fotogrammi chiave
Esempio
Fai in modo che un elemento si muova gradualmente di 200 px verso il basso:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La @keyframes
regola specifica il codice di animazione.
L'animazione viene creata passando gradualmente da un insieme di stili CSS a un altro.
Durante l'animazione, puoi modificare più volte l'insieme degli stili CSS.
Specifica quando avverrà il cambio di stile in percentuale, o con le parole chiave "da" e "a", che è uguale a 0% e 100%. 0% è l'inizio dell'animazione, 100% è quando l'animazione è completa.
Suggerimento: per un miglior supporto del browser, dovresti sempre definire entrambi i selettori 0% e 100%.
Nota: utilizzare le proprietà dell'animazione per controllare l'aspetto dell'animazione e anche per associare l'animazione ai selettori.
Nota: la regola !important viene ignorata in un fotogramma chiave (vedi l'ultimo esempio in questa pagina).
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la regola.
I numeri seguiti da -webkit-, -moz- o -o- specificano la prima versione che ha funzionato con un prefisso.
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- |
Sintassi CSS
@keyframes animationname {keyframes-selector {css-styles;}}
Valori di proprietà
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 |
Altri esempi
Esempio
Aggiungi molti selettori di fotogrammi chiave in un'unica animazione:
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Esempio
Modifica molti stili CSS in un'unica animazione:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Esempio
Molti selettori di fotogrammi chiave con molti stili 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;}
}
Esempio
Nota: la regola !important viene ignorata in un fotogramma chiave:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
Pagine correlate
Tutorial CSS: Animazioni CSS