Animation-iteration-count - Property CSS

Syntax diagram of animation-iteration-count.

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

• number is a positive number without a unit, it is the number of repetitions.
• Several values can be specified separated by commas when there are multiple animations declared.

Description of the animation-iteration-count property.

animation-iteration-count defines how many times the animation will play. That is, how many times the from-to cycle (defined by @keyframes) will be repeated.

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

Values for animation-iteration-count.

• animation-iteration-count: infinite;

  The animation will play indefinitely.

• animation-iteration-count: 3;

  A unitless, positive number indicating the number of times the animation will be played.
  The default value is 1.

  If the value is 0, the animation is not visible, but the animationstart and animationend events are triggered, and the animated properties are set to their values defined at the end of the animation.

  It is possible to specify a decimal number to indicate that the animation should be played partially.

• animation-iteration-count: 2, infinite, ...;

  Several values separated by a comma. This syntax can be used when multiple animations are defined by animation-name. For more details on multiple animations, see the page on multiple animations.

• animation-iteration-count: initial; (1) animation-iteration-count: inherit; animation-iteration-count: revert; animation-iteration-count: revertLayer; animation-iteration-count: unset;

  Links to the presentation of these values: initial, inherit, revert, revert-layer, unset.

Animation of the animation-iteration-count property.

The property animation-iteration-count cannot itself be the subject of an animation. None of the other properties that manage animations can be animated.

Manipulating the animation-iteration-count property programmatically.

Change the value of animation-iteration-count in JavaScript.

In JavaScript, here is how to change the value of animation-iteration-count for an el element (two possible syntaxes).

let el = document.getElementById('id'); el.style['animation-iteration-count'] = '2.5'; // or let el = document.getElementById('id'); el.style.animationIterationCount = '2.5';

Read the value of animation-iteration-count in JavaScript.

For this code, the property must have been applied directly to the element itself, using the HTML style attribute, and not via a CSS selector.

let el = document.getElementById('id'); let value = el.style['animation-iteration-count']; // or let el = document.getElementById('id'); let value = el.style.animationIterationCount;

Read the computed value of animation-iteration-count in Javascript.

The computed value results from the evaluation of the inheritance cascade. Failing that, it will be the initial value of the property (1 for animation-iteration-count). In the case of animation-iteration-count, the value is returned as a number without a unit, which may include decimals.

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

Change the value of animation-iteration-count in JQuery.


$('#id').css('animation-iteration-count', '2.5');
// or
$('#id').css('animationIterationCount', '2.5');


Read the computed valeur of animation-iteration-count in JQuery.

The returned value is a unitless number, as in JavaScript.

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

Other code examples.

Visit the page Javascript and CSS to find other examples of JavaScript and JQuery code.

Test it yourself.

The buttons below apply the entered value to the property animation-iteration-count 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-iteration-count is stored (serialized).

Browsers compatibility with animation-iteration-count.

1

Animation
support

2

animation-iteration-count
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

Historic of the animation-iteration-count property.

• CSS Animations Level 1

  Introduction of animations in CSS, and definition of the animation-iteration-count property.
  

  March 20, 2009

  Working Draft.

  

  

  

• CSS Animations Level 2

  No change.
  

  March 02, 2023

  Working Draft.

  

  

  

See also, about animations.

The properties related to animations are grouped in the W3C CSS Animations specification module. Here is the list, to make your search easier:

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-fill-mode

Sets the override when the animation is not running.

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.