CSS3 @keyframes règles
Exemples
Faire un élément div se déplace progressivement 200 pixels:
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
Essayez »
Dans le bas de cette page pour plus d'exemples.
support du navigateur
| 属性 | |||||
|---|---|---|---|---|---|
| @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- |
définitions de balises et les instructions
Utilisez les règles de @keyframes, vous pouvez créer une animation.
Création d'animation en changeant progressivement le réglage d'un style CSS à l'autre.
Au cours de l'animation, vous pouvez changer les temps définir le style CSS.
L'utilisation se produit lors d'un changement spécifié dans%, ou mot-clé "de" et "à", et ceci est le 0% à 100% identiques.
0% correspond au début de l'animation, 100% lorsque l'animation est terminée.
Pour le support du navigateur optimal, vous devez toujours être définie comme 0% et 100% du sélecteur.
Remarque: Utilisez lapropriété d'animation pour contrôler l'apparence de l'animation est également utilisé pour sélectionner l' animation bind. .
grammaire
| valeur | explication |
|---|---|
| animationname | Obligatoire. Définir le nom de l'animation. |
| keyframes-sélecteur | Obligatoire. La durée du pourcentage de l'animation. Valeur juridique: 0 à 100% Remarque: Vous pouvez utiliser une animation keyframes-sélecteurs. |
| css-styles | Obligatoire. Un ou plusieurs attributs légitimes de style CSS |
exemples en ligne
Exemples
Beaucoup du sélecteur d'images clés pour ajouter un film:
{
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;}
}
Essayez »
Exemples
Changer de nombreux styles CSS dans une animation:
{
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;}
}
Essayez »
Exemples
De nombreux sélecteurs keyframe avec de nombreux styles 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;}
}
Essayez »
articles connexes
CSS3 Tutoriel: CSS3 Animations