animation-iteration-count
CSS animation-iteration-count Property
The CSS animation-iteration-count defines how many times the animation should be played. It is specified by two values: number and infinite. The default value is 1, but any number can be set. 0 or negative values are invalid. If the infinite value sets the animation, it will be played forever. If multiple values are used every time the animation is played the next value of the list is used.
When multiple comma-separated values are specified for any animation property, they will be attached to the animations that are defined in animation-name differently.
The animation-iteration-count property is one of the CSS3 properties.
| 类目 | 类目 |
|---|---|
| Initial Value | 1 |
| Applies to | All elements, ::before and ::after pseudo-elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.animationIterationCount = “infinite”; |
Syntax
Syntax
animation-iteration-count: number | infinite | initial | inherit;
Example of the animation-iteration-count property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 100px;
height: 100px;
margin: 30px 0;
border-radius: 50%;
animation-name: pulse;
}
.element-one {
background-color: #1c87c9;
animation-duration: 3s;
animation-iteration-count: 3;
}
.element-two {
margin: 0;
background-color: #83bf42;
animation-duration: 5s;
animation-iteration-count: 2;
}
@keyframes pulse {
0% {
left: 0;
}
50% {
left: 50%;
}
100% {
left: 0;
}
}
</style>
</head>
<body>
<h2>The animation-iteration-count example</h2>
<p>The animation-iteration-count sets the number of times an animation cycle should be played before stopping.</p>
<div class="element-one"></div>
<div class="element-two"></div>
</body>
</html>
Example of the animation-iteration-count property with the “infinite” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 100px;
height: 100px;
margin: 30px 0;
border-radius: 50%;
animation-name: pulse;
}
.element-one {
background-color: #1c87c9;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.element-two {
margin: 0;
background-color: #83bf42;
animation-duration: 5s;
animation-iteration-count: 2;
}
@keyframes pulse {
0% {
left: 0;
}
50% {
left: 50%;
}
100% {
left: 0;
}
}
</style>
</head>
<body>
<h2>The animation-iteration-count example</h2>
<p>The animation-iteration-count property sets the number of times an animation cycle should be played before stopping.</p>
<div class="element-one"></div>
<div class="element-two"></div>
</body>
</html>
Values
Values
| Value | Description | Play it |
|---|---|---|
| number | Defines how many times the animation should be played. Default value is 1. | Play it » |
| infinite | The animation is played without stopping. | Play it » |
| initial | Sets the property to its default value. | |
| inherit | Inherits the property from its parent element. |