CSS animations are a great way to add visual interest and interactivity to a website. One of the key properties of CSS animations is the animation-iteration-count property. This property allows you to specify how many times an animation should repeat before stopping.
The animation-iteration-count property is used to set the number of times an animation should repeat. The value can be a number, which specifies the number of times the animation should repeat, or the keyword "infinite", which specifies that the animation should repeat indefinitely.
Here is an example of how to use the animation-iteration-count property:
/* Set the animation to repeat 3 times */
animation-iteration-count: 3;
/* Set the animation to repeat indefinitely */
animation-iteration-count: infinite;
It is important to note that the animation-iteration-count property only applies to animations that have a finite duration. If an animation has an infinite duration, such as a rotating spinner, the animation will continue to repeat indefinitely regardless of the value of the animation-iteration-count property.
Here is an example of a CSS animation that uses the animation-iteration-count property:
/* Define the animation */
@keyframes example {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
/* Apply the animation to an element */
div {
animation-name: example;
animation-duration: 2s;
animation-iteration-count: 3;
}
In this example, the animation will scale the element up by 50% and then back down to its original size. The animation will repeat 3 times before stopping.
The animation-iteration-count property can also be used in conjunction with other animation properties, such as animation-delay and animation-direction, to create more complex animations.
Here is an example of a more complex CSS animation that uses the animation-iteration-count property:
/* Define the animation */
@keyframes example {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
/* Apply the animation to an element */
div {
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 1s;
animation-direction: alternate;
}
In this example, the animation will move the element 100 pixels to the right and then back to its original position. The animation will repeat indefinitely, with a delay of 1 second between each iteration. The animation will also alternate direction on each iteration, moving the element to the left on every other iteration.
The animation-iteration-count property is a powerful tool for creating dynamic and engaging CSS animations. By using this property, you can control how many times an animation should repeat and create more complex animations that incorporate other animation properties.