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

Media

Visual

Computed value

As specified

Animatable

No

CSS Version

CSS3

JavaScript syntax

object.style.animationIterationCount

Syntax

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

Values

• 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

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

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

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

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

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;  
   } 
}

Browser Support

Desktop
10	12	43	16	30	9
Tablets / Mobile
43	43	16	30	9	4.0

Last updated by CSSPortal on: 17th October 2019