Animation-fill-mode - Property CSS

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-direction property.

• 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-direction property).

• 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):

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.

1

Animation
support

2

animation-fill-mode
property

Estimated overall support.

97%

96%

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

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

animation-fill-mode property historic.

• CSS Animations Level 1

  Introduction of CSS animations, and definition of corresponding properties, including animation-fill-mode.
  

  March 20, 2009

  Working Draft.

  

  

  

• CSS Animations Level 2

  No change.
  

  March 02, 2023

  Working 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:

animation

Short hand property that defines most animation parameters, such as duration, speed up, number of repetitions, direction, and so on.

animation-composition

Defines how multiple animations applied to the same property interact.

animation-delay

Waiting time before the animation starts, usually counted from the page load.

animation-direction

Defines the direction of the animation (normal or reverse) with respect to the @keyframes at-rule.

animation-duration

Sets the total duration of an animation cycle.

animation-iteration-count

Sets the number of times an animation should be played.

animation-name

Specifies which animation (defined by @keyframes) to apply to the element.

animation-play-state

Define the animation status (in progress or paused).

⚠

animation-timeline

Associates animation with something other than time, such as scrolling through an element.

animation-timing-function

Defines the easing function to be used during an animation.

At-rules:

@keyframes

Defines the name of an animation and which properties are animated.