Animation-fill-mode - Propriété CSS

Schéma de la syntaxe de animation-fill-mode.

Description des termes utilisés sur le schéma :

• Plusieurs valeurs peuvent être indiquées en les séparant par des virgules, autant qu'il y a d'animations déclarées.

Description de la propriété animation-fill-mode.

animation-fill-mode est une propriété CSS qui définit dans quel état se trouve l'élément animé lorsque une animation est terminée ou pas encore commencée (c'est à dire pendant le temps d'attente défini par animation-delay).

La propriété animation-direction influe ce qui est le début ou la fin de l'animation.

Pour consulter une présentation générale sur les animations, reportez-vous à la page sur les animations en CSS.

Valeurs pour animation-fill-mode.

• animation-fill-mode: none;

  Valeur par défaut. Pendant le temps d'attente et après la fin de l'animation, les propriétés animées prennent leur valeur par défaut ou celle définie par d'autres règles CSS.

• animation-fill-mode: forwards;

  A la fin de l'animation, les valeurs des propriétés animées sont celles de la fin de l'animation, compte-tenu de la direction définie par la propriété animation-direction.

• animation-fill-mode: backwards;

  Pendant la durée d'attente, donc avant que l'animation ne commence, les valeurs des propriétés animées sont celles du début de l'animation, compte-tenu de la direction choisie par la propriété animation-direction).

• animation-fill-mode: both;

  Cette valeur cumule les effets des deux valeurs précédentes :
  Pendant le temps d'attente, les propriétés ont la valeur définie au début de l'animation, et après la fin de l'animation, les propriétés gardent la valeur obtenue à la fin de l'animation.

• animation-fill-mode: backwards, forwards, ...;

  Plusieurs valeurs séparées par des virgules. Cette syntaxe est utile lorsque plusieurs animations ont été définies par animation-name. Pour une présentation générale des animations multiples, consultez la page les animations multiples.

• animation-fill-mode: initial; (none) animation-fill-mode: inherit; animation-fill-mode: revert; animation-fill-mode: revertLayer; animation-fill-mode: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de animation-fill-mode.

Non la propriété animation-fill-mode elle même ne peut pas être animée, de même que toutes les autres propriétés relatives aux animations.

Accéder à la propriété animation-fill-mode par programme.

Modifier la valeur de animation-fill-mode en Javascript.

Exemple de code Javascript pour modifier la valeur de animation-fill-mode. Deux syntaxes sont acceptées : la première avec le nom de la propriété écrit en kebab-case (un tiret pour séparer les mots), et la deuxième avec le nom écrit en camel-case (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['animation-fill-mode'] = 'forwards'; // ou let el = document.getElementById('id'); el.style.animationFillMode = 'forwards';

Lire en Javascript la valeur de animation-fill-mode.

La propriété doit avoir été affectée directement à l'élément lui-même via l'attribut style du HTML, et non pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['animation-fill-mode']; // ou let el = document.getElementById('id'); let value = el.style.animationFillMode;

Lire la valeur calculée de animation-fill-mode en Javascript.

La valeur calculée résulte de l'évaluation de la cascade des héritages. Ce sera, dans l'ordre : la valeur affectée via l'attribut style, la valeur affectée via un sélecteur CSS (si plusieurs sélecteurs désignent le même élément, le conflit en résolu en fonction des règles de priorité), une valeur héritée éventuelle, ou enfin, la valeur initiale de animation-fill-mode.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('animation-fill-mode');

Modifier la valeur de la propriété animation-fill-mode avec JQuery.


$('#id').css('animation-fill-mode', 'forwards');
// ou
$('#id').css('animationFillMode', 'forwards');


Lire la valeur calculée de la propriété animation-fill-mode avec JQuery.

let value = $('#id').css('animation-fill-mode');

Tester vous-même.

Cet outil vous permet d'affecter une valeur à la propriété animation-fill-mode et de relire ensuite cette valeur, soit telle qu'elle a été affectée, soit la valeur calculée. Ceci permet de voir comment est sérialisé la valeur.

Exemple interactif avec la propriété animation-fill-mode.

Le simulateur fait évoluer la marge gauche de 25% à 75%. L'animation démarre 2 secondes après un clic sur le bouton ci-dessous. En dehors de l'animation, cette marge est par ailleurs définie à zéro.

Compatibilité des navigateurs avec animation-fill-mode.

1

Support des
animations

2

Propriété
animation-fill-mode

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété animation-fill-mode.

• Module CSS - Animations Niveau 1

  Cette spécification introduit les changements de valeurs de propriétés au fil du temps. Les animations sont semblables aux transitions mais elles n'ont pas besoin d'un événement extérieur pour s'exécuter (code Javascript, action de l'utilisateur, etc.). Les différentes étape de l'animations sont contrôlées par une directive @keyframes.
  De nombreux paramètres peuvent être ajustés au moment d'appliquer une animation : nombre de répétitions, durée, l'animation inverse-t-elle son début et sa fin ou non, etc. Chacun de ces paramètres correspondant à une propriété.

  Concernant animation-fill-mode. Introduction des animations CSS, et définition des propriétés correspondantes, dont animation-fill-mode.
  

  20 Mars 2009

  Document de travail.

  

  

  

• Module CSS - Animations Niveau 2

  Ce niveau 2 de la spécification introduit surtout les animations pilotées par un défilement. Celles-ci sont décrites dans un module séparés mais il y a nécessairement des interactions avec le module animation. En particulier la propriété animation-timeline est introduite.
  Une autre propriété est ajoutée : animation-composition qui définit comment des animations se combinent lorsqu'elles sont appliquées à un même élément.

  Concernant animation-fill-mode. Pas de modification.
  

  02 Mars 2023

  Document de travail.

  

  

  

Voir aussi, au sujet des animations.

Tout ce qui concerne les animations est regroupé dans le module de spécification du W3C module CSS - Animations. Il s'agit essentiellement d'une directive et de plusieurs propriétés.

Propriétés :

Directives :