Propriété CSS animation-direction
Exemple
Jouez d'abord l'animation vers l'avant, puis vers l'arrière :
div {
animation-direction: alternate;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La animation-direction
propriété définit si une animation doit être lue en avant, en arrière ou en cycles alternés.
Valeur par défaut: | Ordinaire |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.animationDirection="inverse" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit-, -moz- ou -o- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
animation-direction | 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
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
Valeurs de propriété
Value | Description | Play it |
---|---|---|
normal | Default value. The animation is played as normal (forwards) | |
reverse | The animation is played in reverse direction (backwards) | |
alternate | The animation is played forwards first, then backwards | |
alternate-reverse | The animation is played backwards first, then forwards | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Jouez d'abord l'animation en arrière, puis en avant :
div {
animation-direction: alternate-reverse;
}
Exemple
Jouez l'animation à l'envers :
div {
animation-direction: reverse;
}
Pages connexes
Tutoriel CSS : Animations CSS
Référence HTML DOM : propriété animationDirection