CSS animation-iteration-count Property

Description

The animation-iteration-count property specifies the number of times an animation cycle is played. The initial value is '1', meaning the animation will play from beginning to end once. A value of 'infinite' will cause the animation to repeat forever.

Initial value: 1
Applies to: All elements, :before and :after pseudo elements
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.animationIterationCount

Interactive Demo

animation-iteration-count: infinite;

animation-iteration-count: 3;

animation-iteration-count: 1;

animation-iteration-count: 0;

Syntax

animation-iteration-count: <single-animation-iteration-count> [ ',&' <single-animation-iteration-count> ]*

Values

<single-animation-iteration-count> = infinite | <number>

infiniteThe animation will repeat forever.
<number>The number of times the animation should repeat; this is 1 by default. Negative values are invalid. You may specify non-integer values to play part of an animation cycle (for example 0.5 will play half of the animation cycle).

Example

HTML

<div class="test"> 1 </div> 

<div class="test2"> 2 </div> 

<div class="test3"> 3.5 </div> 

<div class="test4"> infinite </div>

CSS

div { 
   width: 50px; 
   height: 50px; 
   border-radius: 100%; 
   display: inline-block;  
   color: white; 
   padding: 15px;  
   position: relative;  
   text-align: center;  
   line-height: 50px; 
   animation-duration: 1.5s;  
   animation-name: iliketomoveit; 
} 
.test { 
   animation-iteration-count: 1;   
} 
.test2 { 
   animation-iteration-count: 2;  
} 
.test3 { 
   animation-iteration-count: 3.5; 
} 
.test4 { 
   animation-iteration-count: infinite;
} 
@keyframes iliketomoveit {
   0% { 
      top: 0px;  
   } 
   25% { 
      top: 200px;  
      background: red;  
   } 
   75% { 
      top: 100px;  
   } 
   100% { 
      top: 0px;  
      background: black;  
   } 
}

Result

Editor