Exemple
Faire un élément se déplacer progressivement vers le bas 200px:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Essayez - le vous - même » Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
La règle @keyframes spécifie le code d'animation.
L'animation est créée en changeant progressivement d'un ensemble de styles CSS à l'autre.
Au cours de l'animation, vous pouvez modifier l'ensemble des styles CSS nombreuses fois.
Spécifiez quand le changement de style se produira en pour cent, ou avec les mots - clés "from" et "to" , qui est le même que 0% et 100%. 0% correspond au début de l'animation, 100% lorsque l'animation est terminée.
Astuce: Pour un meilleur support du navigateur, vous devez toujours définir à la fois le 0% et les 100% sélecteurs.
Note: Utilisez les propriétés d'animation pour contrôler l'apparence de l'animation, et aussi pour lier l'animation aux sélecteurs.
support du navigateur
Les chiffres dans le tableau indique la première version du navigateur qui prend en charge pleinement la règle.
Numbers suivis par -webkit-, -moz- ou -O- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| @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- |
Syntaxe CSS
@keyframesanimationname {keyframes-selector {css-styles;}}propriété valeurs
| Valeur | La description |
|---|---|
| animationname | Champs obligatoires. Définit le nom de l'animation. |
| keyframes-selector | Champs obligatoires. Pourcentage de la durée de l'animation. Les valeurs légales: 0 à 100% Note: Vous pouvez avoir beaucoup de keyframes-sélecteurs dans une animation. |
| css-styles | Champs obligatoires. Une ou plusieurs propriétés juridiques de style CSS |
Autres exemples
Exemple
Ajouter plusieurs sélecteurs images clés dans une animation:
/* 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;}
}
Essayez - le vous - même » Exemple
Changer de nombreux styles CSS dans une animation:
/* 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;}
}
Essayez - le vous - même » Exemple
De nombreux sélecteurs keyframe avec de nombreux styles 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;}
}
Essayez - le vous - même » Pages associées
CSS3 tutoriel: CSS3 Animations