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¶
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¶
| Value | Description | |
|---|---|---|
| number | Defines how many times the animation should be played. The default value is 1. |
0 Comments
CAN FEEDBACK
Emoji