animation-fill-mode - Propriété CSS
Résumé des caractéristiques de la propriété animation-fill-mode
none
| forwards
| backwards
| both
none
animation-fill-mode
ne peut pas être animée.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 présentation générale des animations.
Syntaxes pour animation-fill-mode
.
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
; animation-fill-mode:inherit
; animation-fill-mode:revert
; animation-fill-mode:revert-layer
; animation-fill-mode:unset
;La valeur initiale est :
.none
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.
La marge gauche de l'élément ci-dessous (le cercle bleu) est animée de 0
à 100%
. L'animation est exécutée une seule fois :
si le cercle bleu ne défile pas c'est que l'animation est terminée. sa position est alors déterminée par la propriété animation-fill-mode
.
Par défaut l'élément est centré sur la largeur de la page.
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).
function setAnimationFillMode(el) {
el.style['animation-fill-mode']='forwards';
// ou
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.
function getAnimationFillMode(el) {
alert(el.style['animation-fill-mode']);
// ou
alert(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
.
function getCalcAnimationFillMode(el) {
alert(window.getComputedStyle(el).getPropertyValue('animation-fill-mode'));
}
Modifier la valeur de la propriété animation-fill-mode
avec JQuery.
function setAnimationFillMode(el) {
$(el).css('animation-fill-mode','none');
// ou
$(el).css('animationFillMode','none');
}
Lire la valeur calculée de la propriété animation-fill-mode
avec JQuery.
function getCalcAnimationFillMode(el) {
alert($(el).css('animation-fill-mode'));
// ou
alert($(el).css('animationFillMode'));
}
Simulateur.
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
.
animation-fill-mode
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-fill-mode
.
Les spécifications CSS éditées par le W3C sont organisées en modules. animation-fill-mode
fait partie du Module CSS - Animations (CSS Animations). Les définitions suivantes sont également décrites dans ce même module.