Animation-fill-mode - Propriété CSS
Résumé des caractéristiques de la propriété animation-fill-mode
none | forwards | backwards | bothnoneanimation-fill-mode ne peut pas être animée.Single : valeur unique (l'ordre n'intervient pas).Schéma syntaxique de animation-fill-mode.
Légende :
- 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.
Syntaxes 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.
Valeurs globales
(communes à toutes les propriétés)
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.
Peut-on animer la propriété 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.
Manipulation de 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.
Prise en charge par les navigateurs (compatibilité).
animation-fill-mode.animations
animation-fill-modeNavigateurs 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
Historique de la propriété animation-fill-mode.
-
Module CSS - Animations Niveau 1
Introduction des animations CSS, et définition des propriétés correspondantes, dontanimation-fill-mode.
20 Mars 2009Document de travail.
-
Module CSS - Animations Niveau 2
Pas de modification.02 Mars 2023Document de travail.
Voir aussi, au sujet des animations.
Tout ce qui concerne les animations est regroupé dans le module de spécification du W3C CSS Animations. Il s'agit essentiellement d'une directive et de plusieurs propriétés.
Propriétés :
@keyframes.@keyframes) appliquer à l'élément.