propriété css animation-direction

Définition et utilisation da la propriété css animation-direction

La propriété animation-direction en CSS est utilisée pour définir la direction de l'animation. La direction de l'animation peut être en avant, en arrière ou en cycles alternés.

La Syntaxe CSS

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

Valeurs par défaut	normal
Inherited:	non
Animable :	non En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.animationDirection="reverse"

Prise en charge de la propriété css animation-direction par les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.

Explorateur
Verssion	43 4 -webkit-	10	16 5 -moz-	9 4 -webkit-	30 15 -webkit- 12 -o-

Exemple 📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
	<title>
		CSS | La propriété animation-direction 
	</title>
	<style>
		body {
			text-align:center;
		}
		h1 {
			color:green;
			animation-name: textAnimation;
			animation-duration: 2s;
			animation-iteration-count: 4;
		}
		h2 {
			width: 100%;
			animation-name: textAnimation;
			animation-delay: 2s;
			animation-duration: 2s;
		}
		h3 {
			width: 100%;
			animation-name: textAnimation;
			animation-delay: 3s;
			animation-duration: 2s;
		}
		#une {
			animation-direction: alternate;
		}
		#deux{animation-direction: reverse;}
		@keyframes textAnimation {
			from {
				margin-left: 60%;
			}
			to {
				margin-right: 0%;
			}
		}
	</style>
</head>
<body>
	<h1 id="une">Lire avec oujoood.com</h1>
	<h2 id="deux">la propriété animation-direction </h2>
	<h3 id="trois">la direction de l'animation de ce text est par defaut normal.</h3>
</body>
</html>

Exemple Modifier la direction de l'animation avec javascript 📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
	<title>
		CSS | La propriété animation-direction 
	</title>
	<style> 
div {
  width: 100px;
  height: 100px;
  background: darkblue;
  position: relative;
  animation: monAnimation 5s infinite;
}

@keyframes monAnimation {
  from {left: 0px;}
  to {left: 200px;}
}
</style>
</head>
<body>

<h1>Modifier l'animation-direction avec JavaScript</h1>

<p>Click sur le bouton "CHANGER" pour inverser la direction de l'animation animation.</p>
<button onclick="maFonction()">CHANGER</button><br>
<div id="monDIV"></div>

<script>
function maFonction() {
  document.getElementById("monDIV").style.animationDirection = "reverse";
}
</script>
</body>
</html>

Valeurs de la propriété css animation-direction

- normal : Cette propriété d'animation permet de jouer l'animation vers l'avant. Il s'agit de la valeur par défaut.
- reverse : Cette propriété d'animation joue l'animation dans le sens inverse.
- alternate : Cette propriété d'animation permet de jouer l'animation d'abord en avant, puis en arrière.
- alternate-reverse : Cette propriété d'animation joue d'abord l'animation en arrière, puis en avant.
- initial : Cette propriété est utilisée pour définir la propriété d'animation à sa valeur par défaut.
- inherit : Cette propriété est utilisée pour hériter de la propriété d'animation de son élément parent.

Liste des propriétés css

Définir la direction d'une animation avec la propriété css animation-direction

Les propriétés CSS par ordre alphabétique

Définition et utilisation da la propriété css animation-direction

Prise en charge de la propriété css animation-direction par les navigateurs

Valeurs de la propriété css animation-direction

Voir aussi nos tutoriel :