Esempio
Fare un elemento spostare gradualmente 200px verso il basso:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
La regola @keyframes specifica il codice di animazione.
L'animazione viene creato gradualmente passare da un insieme di stili CSS all'altro.
Durante l'animazione, è possibile modificare il set di stili CSS molte volte.
Specifica quando il cambiamento di stile avverrà in percentuale, o con le parole chiave "from" e "to" , che è la stessa come 0% e 100%. 0% è l'inizio dell'animazione, 100% è quando l'animazione è completa.
Suggerimento: Per una migliore supporto del browser, si dovrebbe sempre definire sia lo 0% e il 100% di selettori.
Note: Utilizzare le proprietà di animazione per controllare l'aspetto dell'animazione, e anche di legare l'animazione di selettori.
Supporto per il browser
I numeri nella tabella specifica la prima versione del browser che supporta pienamente la regola.
Numeri seguiti da -webkit-, -moz- o -o- specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| @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 Sintassi
@keyframesanimationname {keyframes-selector {css-styles;}}I valori delle proprietà
| Valore | Descrizione |
|---|---|
| animationname | Necessario. Definisce il nome dell'animazione. |
| keyframes-selector | Necessario. Percentuale della durata dell'animazione. I valori validi: 0-100% Note: Si possono avere molti fotogrammi chiave-selettori in una animazione. |
| css-styles | Necessario. Uno o più proprietà di stile CSS legali |
Altri esempi
Esempio
Aggiungere molti selettori dei fotogrammi chiave in un'animazione:
/* 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;}
}
Prova tu stesso " Esempio
Cambiare molti stili CSS in una animazione:
/* 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;}
}
Prova tu stesso " Esempio
Molti selettori fotogramma chiave con molti stili 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;}
}
Prova tu stesso " Pagine correlate
CSS3 tutorial: CSS3 animazioni