CSS - animation-iteration-count Property

The CSS property animation-iteration-count specifies how many cycles an animation sequence should run through before it comes to a halt.

The shorthand property animation is a convenient way to define all animation-related properties at the same time.

The animation-iteration-count property accepts multiple values separated by commas.

Possible Values

The CSS property animation-iteration-count is defined as one or more comma-separated values, which can be one of the following values:

  • infinite - The animation will continue indefinitely without stopping.

  • <number> - By default, the animation is repeated once, which is defined by the animation-iteration-count property. You can specify non-integer values such as 0.5 to play a partial section of animation cycle. Negative values are not valid for this property.

Note: When multiple comma-separated values on an animation-* property is specified, the values are applied to the animations in the order in which the animation-names appear.

Note: While defining the CSS scroll-driven animations, the value of animation-iteration-count determines the number of times the animation is repeated over the course of timeline's progress. In case no value is specified for animation-iteration-count, the animation is executed only once. infinte is a valid value, but may result in an unworkable animation in case of CSS scroll-driven animation.

Syntax

/* Keyword value */
animation-iteration-count = infinte;  

/* <number> values */
animation-iteration-count = 4;  
animation-iteration-count = 3.2;

/* Multiple values */
animation-iteration-count = 4, 0, infinite;

Applies To

All the HTML elements, ::before and ::after pseudo-elements.

CSS animation-iteration-count - Keyword Value

  • In this example, the property animation-iteration-count is set to infinte, which defines the repetitions of the animation sequence as infinite.

  • This property specifies the number of iterations the animation runs through before it is stopped.

  • In this example, the box element moves vertically up and down infinitely based on the specified iteration count of the animation.

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
   }
   .box {
      width: 150px;
      height: 150px;
      font-size: 20px;
      background-color: #3498db;
      animation-name: slide;
      animation-duration: 2s;
      animation-iteration-count: infinite;
   }
   @keyframes slide {
      0% {
      transform: translateY(0);
      }
      50% {
      transform: translateY(100px);
      }
      100% {
      transform: translateY(0);
      }
   }
</style>
</head>
<body>
<div class="box">Animation Iteration Count</div>
</body>
</html>

CSS animation-iteration-count - <number> Value

  • In this example, the property animation-iteration-count is set to 2, which defines the repetitions of the animation sequence twice.

  • This property specifies the number of iterations the animation runs through before it is stopped.

  • In this example, the box element moves vertically up and down twice based on the specified iteration count of the animation.

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
   }
   .box {
      width: 150px;
      height: 150px;
      font-size: 20px;
      background-color: #3498db;
      animation-name: slide;
      animation-duration: 2s;
      animation-iteration-count: 2;
   }
   @keyframes slide {
      0% {
      transform: translateY(0);
      }
      50% {
      transform: translateY(100px);
      }
      100% {
      transform: translateY(0);
      }
   }
</style>
</head>
<body>
<div class="box">Animation Iteration Count</div>
</body>
</html>

CSS animation-iteration-count - Multiple Values

  • In this example, the property animation-iteration-count is set to multiple values, i.e., 4 and 2, which defines the repetitions of the animation sequence four times first and then twice.

  • This property specifies the number of iterations the animation runs through before it is stopped.

  • In this example, the box element moves vertically up and down based on the specified iteration count of the animation.

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
   }
   .box {
      width: 150px;
      height: 150px;
      font-size: 20px;
      background-color: #3498db;
      animation-name: slide;
      animation-duration: 2s;
      animation-iteration-count: 4, 2;
   }
   @keyframes slide {
      0% {
      transform: translateY(0);
      }
      50% {
      transform: translateY(100px);
      }
      100% {
      transform: translateY(0);
      }
   }
</style>
</head>
<body>
<div class="box">Animation Iteration Count</div>
</body>
</html>
Advertisements