Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

animation-direction - Propriété CSS

animation-direction

Résumé des caractéristiques de la propriété animation-direction

Description rapide
Sens de l'animation (normal ou inverse).
Statut
Standard
Type de valeur
Valeur prédéfinie (multiple)
Valeurs prédéfinies
normal | reverse | alternate | alternate-reverse
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Héritée par défaut
Non
Type d'animation
Not animatable : la propriété animation-direction ne peut pas être animée.
Module W3C
Module CSS - Animations
Références (W3C)
 🡇  
 🡅  
Statut du document:: ED (brouillon des éditeurs)

Statut du document:: WD (document de travail)

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.

Syntaxe de animation-directionSyntaxe de la propriété animation-direction : sens de déroulement d'une animation. normal normal reverse reverse alternate alternate alternate-reverse alternate-reverse , ,animation-direction:;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 sur infinite.

  • 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 sur infinite.

  • 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 page animation.

  • 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.

animation-direction :

Prise en charge par les navigateurs (compatibilité).

Aucun problème de compatibilité à signaler au sujet de la propriété animation-direction.

Colonne 1
Traitement général des animations en CSS.
Colonne 2
Prise en charge par les navigateurs de la propriété CSS animation-direction.
1
Animations
2
animation-direction
Estimation de la prise en charge en pourcentage du parc actuel.
98%
95%

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.

Propriétés.

Paramètres d'animation.
Définit comment interagissent plusieurs animations appliquées à la même propriété.
Temps d'attente avant le démarrage de l'animation.
Définit la durée totale de l'animation.
Style de remplacement lorsque l'animation n'est pas en cours.
Définit le nombre de fois qu'une animation doit être jouée.
Définit l'animation à appliquer à l'élément.
État de l'animation (en cours ou en pause).
Associe l'animation à autre chose que le temps, par exemple le défilement d'un élément.
Définit la fonction d'accélération à utiliser pendant une animation.

Directives.

Définit le nom et les paramètres d'une animation.