Animation-duration - Property CSS

Syntax diagram of animation-duration.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• duration is a positive or nul numeric value, followed by one of CSS units of duration.
• Multiple values can be specified, separated by commas, when multiple animations are declared..

Description of the animation-duration property.

animation-duration sets the duration of the animation, in seconds or milliseconds. The shorter this duration, the faster the animation will be.

It is necessary to define a duration for the animations so that they are operational.

For a general overview of the animations, refer to the page on animations in CSS.

Values for animation-duration.

• animation-duration: auto;

  For classic, time-driven animations, auto is equivalent to 0.
  For scroll-driven animations, auto is evaluated based on the properties animation-range, animation-delay, and animation-iteration-count.

• animation-duration: 5s;

  A positive or zero number, with one of CSS units of duration. This number defines the duration of the animation. In other words, the larger this number is, the slower the animation will be.

  If the value shown is 0, the animation is not visible but everything happens as if it had been executed instantly: the animationstart and animationend events are triggered, and the animated properties are set to their end-of-animation value (defined by animation-fill-mode).

• animation-duration: 5s, 2s...;

  A series of positive or zero numbers, with a unit of time, separated by commas. This syntax can be used if multiple animations have been defined by animation-name. Refer to the page on multiple animations for more details on multiple animations.

• animation-duration: initial; (auto) animation-duration: inherit; animation-duration: revert; animation-duration: revertLayer; animation-duration: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animation of the animation-duration property.

Like all properties that are related to animation, animation-duration cannot be animated itself.

Manipulating the animation-duration property programmatically.

Change the duration of an animation in JavaScript.

In JavaScript, here is how to modify the value of animation-duration according to the two possible syntaxes: in kebab-case and camel-case for the property name.

It is observed that changing the duration while the animation is running disrupts its continuity: this causes a jump in the progression. You can test this with the simulator.

let el = document.getElementById('id'); el.style['animation-duration'] = '5000ms'; // or let el = document.getElementById('id'); el.style.animationDuration = '5000ms';

Read the duration of an animation in JavaScript.

The property must have been applied directly to the element itself via the style attribute and not through CSS using a CSS selector. The duration of the animation is returned exactly as it was set, in the same unit.

let el = document.getElementById('id'); let value = el.style['animation-duration']; // or let el = document.getElementById('id'); let value = el.style.animationDuration;

Read the computed value of animation-duration in Javascript.

The computed value is the one resulting from the evaluation of the relative units and the possible consideration of inherited values. Or, failing that, it is the initial value of the property: (auto) in the case of animation-duration.
For animation-duration, the duration is returned in seconds regardless of the unit used to define it.

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

Change the duration of an animation with jQuery.


$('#id').css('animation-duration', '5000ms');
// or
$('#id').css('animationDuration', '5000ms');


Read the computed value of the property animation-duration with jQuery.

As in JavaScript, the duration is returned in seconds.

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

Other code examples.

Refer to page Javascript and CSS to find other code examples.

Test it yourself.

The buttons below apply the entered value to the property animation-duration and then display either the value as it was applied, or the calculated value. This second option allows you to see how the value of animation-duration is serialized (stored). In particular, it can be observed that durations are converted into seconds.

Simulator.

The simulator allows you to choose a duration for the animation, and consequently the speed at which the circle moves.

Browsers compatibility with animation-duration.

No compatibility issues to report between animation-duration and modern browsers.

Notes:

(1) Changing the value of this property has no effect once the element has loaded.

1

Animation
support

2

animation-duration
property

Estimated overall support.

97%

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1

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

Historic of the animation-duration property.

• CSS Animations Level 1

  This specification introduces changes in property values over time. Animations are similar to transitions, but they do not need an external event to run (JavaScript code, user action, etc.). The different stages of the animation are controlled by an @keyframes at-rule.
  Many parameters can be adjusted when applying an animation: number of repetitions, duration, whether the animation reverses its start and end or not, etc. Each of these parameters corresponds to a property.

  Regarding animation-duration. Introduction of animations in CSS and first definition for animation-direction property.
  

  March 20, 2009

  Working Draft.

  

  

  

• CSS Animations Level 2

  This level 2 of the specification mainly introduces scroll-driven animations. These are described in a separate module, but there are necessarily interactions with the animation module. In particular, the animation-timeline property is introduced.
  Another property is added: animation-composition, which defines how animations combine when they are applied to the same element.

  Regarding animation-duration. Adding auto value for animation-duration property.
  Changed the initial value of the property to auto (previously 0s).
  

  March 02, 2023

  Working Draft.

  

  

  

See also, regarding the animations.

The operation and configuration of animations are described in the CSS Animations module of the CSS standard. The list below summarizes the directives and properties related to animations.

Properties:

At-rules: