Attribut ANIMATION-DIRECTION
Rôle
L’attribut animation-direction permet de spécifier si une animation doit être inversée (elle commence par la fin) ou alternée (le sens est inversé par rapport au précédent).
Une animation est alternée si sa répétition est au moin de 2.
Il est possible aussi d’inverser le mouvement dès le départ et d’alterner le mouvement ensuite.
Version : CSS3
Héritage (inherit) : non
Propriété Javascript : element.style.animationDirection
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
body{
padding: 10px;
background-color: rgb(230,230,230);
}
img{
border-radius: 50%;
width: 100px;
position: relative;
display: block;
margin: 0 auto;
border: thin solid orange;
animation-name: cos;
animation-duration: 1s;
animation-timing-function:ease-in ;
animation-direction: alternate ;
animation-iteration-count: infinite;
}
@keyframes cos {
0% {top: 0px}
100% {top: 150px}
}
– Le code HTML
<img src="//lorempixel.com/output/animals-q-c-100-100-10.jpg" alt="">
Résultat
Dans cet exemple, l’animation est alternée (le rebond) après la chute et répétée à l’infini avec l’attribut iteration-count
Compatibilité
L’attribut animation-direction est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 10
Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -webkit-(Chrome, Safari, Android…), -moz- (Mozilla), -o- (Opéra)
Valeurs
Les différentes valeurs de l’attribut animation-direction sont:
- normal
- Animation recommence à partir du début : valeur par défaut.
Syntaxe :
animation-direction : normal - reverse
- Animation inversé (commence à partir de la fin).
Syntaxe :
animation-direction : reverse - alternate
- Animation qui commence normalement puis se poursuit en sens inverse.
Syntaxe :
animation-direction : alternate - alternate-reverse
- Animation qui commence à la fin puis se poursuit en sens inverse (donc normalement).
Syntaxe :
animation-direction : alternate-reverse - initial
- Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
animation-direction : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
animation-direction : inherit
A voir aussi
animation– animation-delay– animation-duration– animation-timing-function
