CSS Basics: animation-iteration-count

CSS animations are a powerful tool for adding dynamic and engaging effects to web pages. One of the properties that control the behavior of CSS animations is animation-iteration-count. In this article, we will explore how this property works and how it can be used to enhance the visual appeal of your website.

Understanding animation-iteration-count

The animation-iteration-count property determines the number of times an animation cycle should be played. By default, animations play once, but this property allows you to specify a different number of iterations or even make the animation repeat indefinitely.

The value of animation-iteration-count can be an integer, a keyword, or the value infinite. If you specify an integer, the animation will play that number of times. For example, if you set animation-iteration-count: 3;, the animation will play three times before stopping.

If you use the keyword infinite, the animation will repeat indefinitely. This can be useful for creating continuous animations, such as a spinning loading icon or a background gradient that smoothly transitions from one color to another.

Examples

Let's take a look at some examples to better understand how animation-iteration-count works:

@keyframes slide-in {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

.slide-in {
  animation-name: slide-in;
  animation-duration: 1s;
  animation-iteration-count: 2;
}

In this example, we define a keyframe animation called slide-in that moves an element from left to right. We then apply this animation to an element with the class slide-in. The animation will play twice before stopping.

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.pulse {
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

In this example, we define a keyframe animation called pulse that scales an element up and down. We apply this animation to an element with the class pulse and set the animation-iteration-count to infinite. As a result, the animation will repeat indefinitely, creating a pulsating effect.

Conclusion

The animation-iteration-count property is a valuable tool for controlling the number of times an animation plays. By specifying a specific number or using the infinite keyword, you can create engaging and visually appealing animations on your website.

For more information on CSS animations and how to implement them, visit Server.HK, a leading VPS hosting company that provides reliable and high-performance hosting solutions.