animation-iteration-count
=========================

The **`animation-iteration-count`** CSS property sets the number of times an animation sequence should be played before stopping.

Try it
------

It is often convenient to use the shorthand property `animation` to set all animation properties at once.

Syntax
------


```css
/\* 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 comma-separated values on an `animation-*` property, they are applied to the animations in the order in which the `animation-name`s appear. For situations where the number of animations and `animation-*` property values do not match, see Setting multiple animation property values.

**Note:** When creating CSS scroll-driven animations, specifying an `animation-iteration-count` causes the animation to repeat that number of times over the course of the timeline's progression. If an `animation-iteration-count` is not provided, the animation will only occur once. `infinite` is a valid value for scroll-driven animations, but it results in an animation that doesn't work.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `1` |
| Applies to | all elements, `::before` and `::after` pseudo-elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

Formal syntax
-------------
```

animation-iteration-count =   
  <single-animation-iteration-count>#    
  
<single-animation-iteration-count> =   
  infinite        |  
  <number [0,∞]>    
  
```

Examples
--------

### Setting iteration count

This animation will run 10 times.

#### HTML


```html
<div class="box"></div>
```


#### CSS


```css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: 10;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
```


#### Result

Hover over the rectangle to start the animation.

See CSS animations for examples.

Specifications
--------------

| Specification |
| --- |
| CSS Animations Level 1 # animation-iteration-count |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using CSS animations
* JavaScript `AnimationEvent` API
* Other related animation properties: `animation`, `animation-composition`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-name`, `animation-play-state`, `animation-timeline`, `animation-timing-function`