Règle CSS @keyframes
Exemple
Faire un élément se déplacer progressivement de 200 pixels vers le bas :
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La @keyframesrègle spécifie le code d'animation.
L'animation est créée en passant progressivement d'un ensemble de styles CSS à un autre.
Pendant l'animation, vous pouvez modifier l'ensemble des styles CSS plusieurs fois.
Spécifiez quand le changement de style se produira en pourcentage, ou avec les mots-clés "de" et "à", ce qui équivaut à 0 % et 100 %. 0 % correspond au début de l'animation, 100 % à la fin de l'animation.
Conseil : Pour une meilleure prise en charge du navigateur, vous devez toujours définir les sélecteurs 0 % et 100 %.
Remarque : Utilisez les propriétés d'animation pour contrôler l'apparence de l'animation, ainsi que pour lier l'animation aux sélecteurs.
Remarque : La règle !important est ignorée dans une image clé (Voir le dernier exemple sur cette page).
Prise en charge du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend entièrement en charge la règle.
Les nombres suivis de -webkit-, -moz- ou -o- spécifient la première version qui a fonctionné avec un préfixe.
| 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- |
Syntaxe CSS
@keyframes animationname {keyframes-selector {css-styles;}}
Valeurs de propriété
| 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 |
Plus d'exemples
Exemple
Ajoutez plusieurs sélecteurs d'images clés dans une animation :
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Exemple
Modifiez de nombreux styles CSS en une seule animation :
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Exemple
De nombreux sélecteurs d'images clés avec de nombreux styles 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;}
}
Exemple
Remarque : La règle !important est ignorée dans une image clé :
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
Pages connexes
Tutoriel CSS : Animations CSS