CSS3 @keyframes regole
Esempi
Fare un elemento div muove gradualmente 200 pixel:
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
Prova »
In fondo a questa pagina per ulteriori esempi.
Supporto per il browser
| 属性 | |||||
|---|---|---|---|---|---|
| @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- |
le definizioni e le istruzioni tag
Utilizzare le regole @keyframes, è possibile creare animazioni.
La creazione di animazioni modificando gradualmente l'impostazione da uno stile CSS ad un altro.
Durante l'animazione, è possibile modificare l'impostazione volte lo stile CSS.
Utilizzare verifica quando un cambiamento specificato in% o parola "da" e "a", e questo è identico al 0% al 100%.
0% è l'inizio dell'animazione, 100% quando l'animazione è completa.
Per il supporto ottimale del browser, si dovrebbe sempre essere definito come 0% e il 100% del selettore.
Nota: Utilizzare laproprietà di animazione per controllare l'aspetto dell'animazione viene utilizzato anche per selezionare l'animazione bind. .
grammatica
| valore | spiegazione |
|---|---|
| animationname | Richiesto. Definire il nome di animazione. |
| fotogrammi chiave selettore | Richiesto. La durata percentuale dell'animazione. Valore legale: 0-100% Nota: È possibile utilizzare un animato fotogrammi chiave-selettori. |
| CSS-styles | Richiesto. Uno o più attributi legittimi di stile CSS |
Esempi online
Esempi
Molti del selettore fotogramma chiave per aggiungere un filmato:
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
Prova »
Esempi
Cambiare molti stili CSS in una animazione:
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
Prova »
Esempi
Molti selettori fotogramma chiave con molti stili CSS:
{
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;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
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 »
articoli correlati
CSS3 Tutorial: CSS3 Animazione
