Propriété animation-direction CSS

Définition et utilisation

animation-direction Définit si l'animation doit être jouée alternativement en sens inverse.

Si la valeur de animation-direction est "alternateSi " est utilisé, l'animation joue normalement à chaque nombre impair (1, 3, 5, etc.) et joue en arrière à chaque nombre pair (2, 4, 6, etc.).

Remarque :Si l'animation est configurée pour ne jouer qu'une seule fois, cette propriété n'a pas d'effet.

Voir également :

Tutoriel CSS3 :Animation CSS

Manuel de référence HTML DOM :Propriété animationDirection

Exemple

Arrêter l'animation :

div {
  animation-direction: alternate;
}

Essayez-le vous-même

Syntaxe CSS

animation-direction: normal|alternate;
Valeur Description Test
normal Valeur par défaut. L'animation doit jouer normalement. Test
alternate L'animation doit jouer alternativement en sens inverse. Test

Détails techniques

Valeur par défaut : normal
Héritabilité : non
Version : CSS3
Syntaxe JavaScript : object.style.animationDirection="alternate"

Support du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété.

Les nombres précédés de -webkit-、-moz- ou -o- représentent la première version utilisant les préfixes.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
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-