Animation-fill-mode - Property CSS
Summary of characteristics of the animation-fill-mode property
none | forwards | backwards | bothnoneNot animable : the animation-fill-mode property cannot be animated.Syntax diagram of animation-fill-mode.
Legend:
- Several values can be indicated by separating them with commas, as many as there are declared animations.
Description of the animation-fill-mode property.
animation-fill-mode is a CSS property that defines the state the animated element when an animation is completed
or not yet started (i.e. during the wait time defined by animation-delay ).
The animation-direction property influences what is the beginning or end of the animation.
For a general overview of animations, see animations in CSS.
Values for animation-fill-mode.
- animation-fill-mode: none;
Default. During the waiting time and after the animation ends, the animated properties take their default value or the value set by other CSS rules.
- animation-fill-mode: forwards;
At the end of the animation, the values of the animated properties are those of the end of the animation, given the direction defined by the
animation-directionproperty. - animation-fill-mode: backwards;
During the waiting time, so before the animation starts, The value of the animated property are these of the beginning of the animation given the direction chosen by the
animation-directionproperty). - animation-fill-mode: both;
This value combines the effects of the two previous values:
During the wait time, the properties have the value set at the beginning of the animation, and after the animation ends, the properties keep the value obtained at the end of the animation. - animation-fill-mode: backwards, forwards, ...;
Multiple comma-separated values. This syntax is useful when multiple animations have been defined by
animation-name. For a general overview of multiple animations, see les animations multiples.
Global values
(common to all properties):
animation-fill-mode: initial (none)
animation-fill-mode: inherit
animation-fill-mode: revert
animation-fill-mode: revertLayer
animation-fill-mode: unset
See the following pages for more details: initial, inherit, revert, revert-layer, unset.
Can we animate the property animation-fill-mode?
No, the animation-fill-mode property itself cannot be animated, nor can all other properties related to animations.
Manipulating the animation-fill-mode property with Javascript.
Change the value of animation-fill-mode with Javascript.
Sample Javascript code to change the value of animation-fill-mode.
Two syntaxes are accepted: the first with the name of the property written in kebab-case (a hyphen to separate words),
and the second with the name written in camel-box (a capital letter to separate the words).
let el = document.getElementById('id');
el.style['animation-fill-mode'] = 'forwards';
// or
let el = document.getElementById('id');
el.style.animationFillMode = 'forwards';
Read in Javascript the value of animation-fill-mode.
The property must have been assigned directly to the element itself via the style attribute of the HTML, and not by passing through a
CSS selector.
let el = document.getElementById('id');
let value = el.style['animation-fill-mode'];
// or
let el = document.getElementById('id');
let value = el.style.animationFillMode;
Read the computed value of animation-fill-mode with Javascript.
The calculated value is the result of the valuation of the cascade of inheritances. This will be, in order: the value assigned via the
style attribute, the value assigned via a CSS selector (if several selectors designate the same element, the conflict will
be resolved according to the priority rules), any inherited value, or finally, the initial value of animation-fill-mode.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('animation-fill-mode');
Change the value of the animation-fill-mode property with JQuery.
$('#id').css('animation-fill-mode', 'forwards');
// or
$('#id').css('animationFillMode', 'forwards');
Read the computed value of the animation-fill-mode property with JQuery.
let value = $('#id').css('animation-fill-mode');
Test it yourself.
This tool allows you to assign a value to the animation-fill-mode property and then reread that value, either as it was
assigned, either the calculated value. This allows you to see how the value is serialized.
Simulator.
The simulator changes the left margin from 25% to 75%. The animation starts 2 seconds after clicking the button below. Outside of animation, this margin is also set to zero.
animation-fill-mode property compatibility.
the animation-fill-mode property.support
animation-fill-modeproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
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
animation-fill-mode property historic.
-
CSS Animations Level 1
Introduction of CSS animations, and definition of corresponding properties, includinganimation-fill-mode.
March 20, 2009Working Draft.
-
CSS Animations Level 2
No change.March 02, 2023Working Draft.
See also, about animations.
Everything related to animations is grouped in the specification module of the W3C CSS Animations. It is essentially a guideline and several properties.
Properties:
At-rules: