OUJOOD.COM
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.