The animation-iteration-count
CSS property sets the number of times an animation sequence should be played before stopping.
animation-iteration-count
Try it
It is often convenient to use the shorthand property animation
to set all animation properties at once.
Syntax
/* Keyword value */ animation-iteration-count: infinite; /* <number> values */ animation-iteration-count: 3; animation-iteration-count: 2.4; /* Multiple values */ animation-iteration-count: 2, 0, infinite; /* Global values */ animation-iteration-count: inherit; animation-iteration-count: initial; animation-iteration-count: revert; animation-iteration-count: revert-layer; animation-iteration-count: unset;
The animation-iteration-count
property is specified as one or more comma-separated values.
Values
-
infinite
-
The animation will repeat forever.
-
<number>
-
The number of times the animation will repeat; this is
1
by default. You may specify non-integer values to play part of an animation cycle: for example,0.5
will play half of the animation cycle. Negative values are invalid.
Note: When you specify multiple values on an animation-*
property, they will be assigned to the animations specified in the animation-name
property in different ways depending on how many there are. For more information, see Setting multiple animation property values.
Formal definition
Initial value | 1 |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
<single-animation-iteration-count>#where
<single-animation-iteration-count> = infinite | <number>
Examples
The animation will run 10 times.
HTML
<div class="box"></div>
CSS
.box { background-color: rebeccapurple; border-radius: 10px; width: 100px; height: 100px; animation-name: rotate; animation-duration: 0.7s; animation-iteration-count: 10; } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
Result
See CSS animations for examples.
Specifications
Specification |
---|
CSS Animations Level 2 # animation-iteration-count |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
animation-iteration-count |
43
3
|
12
12
|
49
16
5
|
10
|
30
15
12.1-15
12-15
|
9
4
|
43
≤37
|
43
18
|
49
16
5
|
30
14
12.1-14
12-14
|
9
3.2
|
4.0
1.0
|
See also
- Using CSS animations
- JavaScript
AnimationEvent
API
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count