English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS3 animation-iteration-The count property specifies the number of times the animation should play before stopping.
The following table summarizes the usage context and version history of this property.
| Default value: | 1 |
|---|---|
| Applies to: | All elements ::before and ::after Pseudo-element |
| Inheritance: | None |
| Animation can be created: | No.Please refer to Animation properties. |
| Version: | CSS3New feature |
| New feature in JavaScript syntax: | object object.style.animationIterationCount=3 |
The syntax of this attribute is as follows:
animation-iteration-count: number | infinite | initial | inherit
The following example demonstrates how to use animation-iteration-count attribute.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
animation-name: moveit;
animation-duration: 4s;
animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Test and see‹/›The following table describes the value of this attribute.
| Value | Description |
|---|---|
| number | Specify the number of times the animation should repeat. The default value is1. Negative values are not allowed. |
| infinite | The animation will repeat forever, that is, an infinite number of times. |
| initial | Set this property to its default value. |
| inherit | If specified, the associated element adopts its parent element's animation-iteration-Calculation value of count attribute. |
Note:You can specify non-integer values like 0.5, 0.75An animation cycle is just a part of the animation, for example, value 0.5Play half of the animation cycle.
animation-iteration-Browser compatibility of count attribute, all mainstream browsers support this attribute.
|
Please refer to the following tutorials:CSS3Animation.
Related properties and rules:animation,animation-name,animation-duration,animation-timing-function,animation-delay,animation-direction,animation-fill-mode,animation-play-state,@keyframes.