animation-direction - Propriété CSS
Résumé des caractéristiques de la propriété animation-direction
normal
| reverse
| alternate
| alternate-reverse
normal
animation-direction
ne peut pas être animée.Description de la propriété animation-direction
.
La propriété animation-direction
définit si l'animation est jouée dans le sens défini par la
directive @keyframes
ou dans le sens inverse.
Si l'animation est répétée plusieurs fois, animation-direction
peut également déterminer si
l'animation doit faire des 'aller-retour' ou pas.
Pour une présentation générale des animations, reportez-vous à la page animation
.
Syntaxes pour animation-direction
.
- animation-direction: normal;
Valeur par défaut. L'animation est jouée dans le sens défini par
@keyframes
. - animation-direction: reverse;
L'animation est jouée dans le sens inverse de celui défini par
@keyframes
(en commençant par la fin). - animation-direction: alternate;
L'animation est jouée d'abord à l'endroit, puis à l'envers. Cela suppose que la propriété
animation-iteration-count
a été fixée à une valeur supérieure à 1, ou surinfinite
. - animation-direction: alternate-reverse;
L'animation est jouée d'abord à l'envers, puis à l'endroit. Comme pour la valeur précédente, cela suppose que la propriété
animation-iteration-count
a été fixée à une valeur supérieure à 1, ou surinfinite
. - animation-direction: alternate, normal, ...;
Une série de valeurs séparées par des virgules. Cette syntaxe est utilisable lorsque plusieurs animations ont été définies par la propriété
animation-name
. Pour davantage de détails sur les animations multiples, reportez-vous à la pageanimation
. - animation-direction:
initial
; animation-direction:inherit
; animation-direction:revert
; animation-direction:revert-layer
; animation-direction:unset
;La valeur initiale est :
.normal
Animation de animation-direction
.
Pas d'animation possible pour la propriété animation-direction
elle-même.
Manipulation de la propriété animation-direction
par programme.
Les exemples de code ci-après agissent sur l'élément animé ci-dessous (cercle bleu).
Modifier la valeur de animation-direction
en Javascript.
En Javascript, voici comment modifier la valeur de animation-direction
pour un élément el
.
On voit que Javascript propose une syntaxe avec la notation typique de css, en kebab-case
(un tiret pour séparer les mots),
et une autre syntaxe avec la notation en camel-case
(une majuscule pour séparer les mots).
function setAnimationDirection(el) {
el.style['animation-direction']='reverse';
// ou
el.style.animationDirection='reverse';
}
Lire en Javascript la valeur de animation-direction
.
Cet exemple de code récupère la valeur de l'attribut style
du HTML. Autrement dit, la propriété doit avoir été affectée directement
à l'élément lui-même en utilisant l'attribut style
, et non pas en passant via un sélecteur CSS.
function getAnimationDirection(el) {
alert(el.style['animation-direction']);
// ou
alert(el.style.animationDirection);
}
Lire la valeur calculée de animation-direction
en Javascript.
La valeur calculée est celle qui résulte de l'évaluation de la cascade d'héritages.
function getCalcAnimationDirection(el) {
alert(window.getComputedStyle(el).getPropertyValue('animation-direction'));
}
Modifier la valeur de la propriété animation-direction
avec JQuery.
function setAnimationDirection(el) {
$(el).css('animation-direction','normal');
// ou
$(el).css('animationDirection','normal');
}
Lire la valeur calculée de la propriété animation-direction
avec JQuery.
function getCalcAnimationDirection(el) {
alert($(el).css('animation-direction'));
// ou
alert($(el).css('animationDirection'));
}
Simulateur.
Le simulateur ci-dessous utilise une animation nommée demo1
qui déplace un élément
horizontalement sur une grande partie de la ligne.
Cela se fait en modifiant la marge gauche de l'élément.
Remarque : la différence entre alternate
et reverse-alternate
n'est pas visible car cela supposerait de recharger la page,
ce qui remet la propriété à la valeur normal
.
Prise en charge par les navigateurs (compatibilité).
Aucun problème de compatibilité à signaler au sujet de la propriété animation-direction
.
animation-direction
.
animation-direction
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que animation-direction
.
Les spécifications CSS éditées par le W3C sont organisées en modules. animation-direction
fait partie du Module CSS - Animations (CSS Animations). Les définitions suivantes sont également décrites dans ce même module.