The CSS animation-iteration-count property defines the number of times an animation should be played.
Syntax:
animation-iteration-count: number|infinite;number (default value is 1) – A number that specifies how many times an animation should be played.
infinite – defines that the animation should be played infinite times.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.square-1, .square-2 {
width: 100px;
height: 100px;
margin: 5px;
background: #2a9d8f;
position: relative;
display: flex;
align-items: center;
justify-content: center;
animation: move 4s;
}
.square-1 {
animation-iteration-count: 3;
}
.square-2 {
animation-iteration-count: infinite;
}
@keyframes move {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<div class="square-1">1</div>
<div class="square-2">2</div>
</body>
</html>Output:
Square-1 will play the animation three times. Square-2 will play the animation forever.
1
2
Click on the square to repeat the animation.
Enjoy coding!
Read also:
CSS animation-play-state Property