Propriété animation-direction

La propriété animation-direction définit le sens de l'animation. Par défaut, l'animation ne se répète que 1 fois puis revient à son état initial, ensuite, si un délai animation-delay est défini, elle attend le temps spécifié puis le cycle recommence depuis le début.

Cette propriété permet de modifier ce comportement, par exemple, pour que l'animation reste à la fin à l'endroit où elle s'est terminée, au lieu de revenir brusquement à la position initiale.

Il est également possible de définir un comportement où l'animation va jusqu'au point extrême puis revient en arrière (comme dans transition). Voir la description ci-dessous.

Syntaxe

sélecteur {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

Valeurs

Valeur	Description
`reverse`	L'animation sera jouée en sens inverse.
`alternate`	L'animation sera jouée d'abord dans le sens normal, puis en sens inverse (comme transition).
`alternate-reverse`	L'animation sera jouée de la position finale vers la position initiale et inversement. Essentiellement, c'est les valeurs `alternate` et `reverse` en une seule.
`normal`	L'animation sera jouée du début à la fin, et après la fin, elle reviendra brusquement à la position initiale.

Valeur par défaut : normal.

Exemple

Maintenant, l'élément se déplacera dans un sens, puis reviendra en arrière, car la valeur alternate est définie. De plus, animation-duration a une valeur de 3 secondes, ce qui signifie que les déplacements "aller" et "retour" dureront chacun 3 secondes :

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-direction: alternate;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Exemple

Maintenant, l'élément se déplacera dans le sens inverse (devrait aller de gauche à droite, mais ira de droite à gauche) :

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}
			
#elem {
	animation-direction: reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Exemple

Maintenant, l'élément se déplacera aller-retour, mais en sens inverse (devrait commencer à gauche, mais commencera à droite) :

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-direction: alternate-reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Voir aussi

la propriété animation-name,
qui définit le nom de l'animation
la propriété animation-duration,
qui définit la durée de l'animation
la propriété animation-delay,
qui définit le délai avant l'exécution de l'animation
la propriété animation-timing-function,
qui définit la vitesse d'exécution de l'animation
la propriété animation-iteration-count,
qui définit le nombre d'itérations de l'animation
la propriété animation-fill-mode,
qui définit l'état de l'animation
la propriété animation-play-state,
qui permet de mettre l'animation en pause
la propriété animation,
qui est un raccourci pour les animations
la règle @keyframes,
qui définit les images clés de l'animation
les transitions douces transition, qui représentent une animation au survol d'un élément