CSS animation-iteration-count

The CSS animation-iteration-count property is used to define the number of cycle or iteration, an animation to play. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div#mydiv {width: 50px; height: 50px; border-radius: 50%;
         background-color: maroon; position: relative;
         animation-name: fresherearth; animation-duration: 2s;
         animation-iteration-count: infinite;}
      @keyframes fresherearth {
         from {background-color: crimson;}
         to {background-color: darkblue; width: 100px; height: 100px;}
      }
   </style>
</head>
<body>

   <div id="mydiv"></div>
   
</body>
</html>

Output

Since the animation-iteration-count is defined as infinite, therefore the animation named fresherearth plays continuously, for infinite number of times.

Note - The animation-name is used to define a name for an animation.

Note - The animation-duration is used to define time to complete one iteration or cycle of an animation.

Note - The @keyframes is used to define the change in styles for multiple times in one cycle of selected animation.

CSS animation-iteration-count Syntax

The syntax of animation-iteration-count property in CSS, is:

animation-iteration-count: x;

The value of x should be any of the following:

number - used to define custom number of time, an animation to play. The default value is 1
infinite - used to play an animation for infinite number of times
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS Online Test

« Previous Tutorial Next Tutorial »