CSS animation-iteration-count Property

animation-iteration-count sets the number of times an animation plays.

To continually loop an animation, set the value to infinite.

If no value is set, the animation will play only once.

Example

#

An animation with an animation-iteration-count value of 4.
The animation plays 4 times and then stops.

<style> 
  .animate {
    width: 80px;
    height: 80px;
    background: steelblue;
  
    animation: iteratingAnimation 3s;
    animation-direction:alternate;
    animation-iteration-count: 4;
  }

  @keyframes iteratingAnimation {
    from { transform: none; }
    to { transform: translateX(300%) rotate(270deg); }
  }
</style>

<div class="animate"></div>

Syntax

animation-iteration-count: number | infinite | 
                           initial | inherit;

Values

#

Value Description
number Sets how many times an animation should be played.
The default value is 1
infinite Plays animation infinitely (loop)
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different animation-iteration-count values. Refresh the page to start over.

<style> 
  .animate-example {
    width: 80px;
    height: 80px;
    background: steelblue;
    
    animation: movingAnimation 3s;
    animation-iteration-count: infinite;
  }
  
  @keyframes movingAnimation {
    from { transform: none; }
    to { transform: translateX(300%) rotate(180deg); }
  }
</style>

<div class="animate-example"></div>

Browser support

This table shows when animation-iteration-count support started for each browser.

Chrome
43.0 May 2015
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
30.0 Jun 2015
Safari
9.0 Sep 2015

You may also like

Guides