CSS animation-iteration-count Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 27 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The animation-iteration-count property in CSS is used to define the number of times an animation cycle should be played before stopping.

This property allows developers to control how many times an animation repeats, whether it plays once, multiple times, or indefinitely.

💡 Syntax

The syntax for the animation-iteration-count property is simple and can be defined as follows:

Syntax

Copied

element {
  animation-iteration-count: number | infinite;
}

🎛️ Default Value

The default value of the animation-iteration-count property is 1, meaning the animation will play once unless otherwise specified.

🏠 Property Values

Value	Description
number	An integer or fractional number that defines how many times the animation should be played (e.g., 2, 3.5).
infinite	The animation repeats infinitely.

📄 Example

In this example, we'll create an animation that moves a box from left to right and repeat the animation three times.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS animation-iteration-count Example</title>
  <style>
    @keyframes move {
      from { transform: translateX(0); }
      to { transform: translateX(300px); }
    }

    .box {
      width: 50px;
      height: 50px;
      background-color: blue;
      animation-name: move;
      animation-duration: 2s;
      animation-iteration-count: 3;
    }
  </style>
</head>
<body>
  <h1>Animation Iteration Count Example</h1>
  <div class="box"></div>
</body>
</html>

🖥️ Browser Compatibility

The animation-iteration-count property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure consistent behavior.

🎉 Conclusion

The animation-iteration-count property is an essential tool for controlling the behavior of CSS animations.

Whether you need an animation to run just once, multiple times, or loop infinitely, this property provides the flexibility you need. Experiment with different values to see how it affects the animation and enhances the user experience on your website.