Categories
CSS Web development

CSS animation-iteration-count Property

CSS animation-iteration-count Property

The CSS animation-iteration-count property defines the number of times an animation should be played.

Syntax:

animation-iteration-count: number|infinite;

number (default value is 1) – A number that specifies how many times an animation should be played.

infinite – defines that the animation should be played infinite times.

Example:

<!DOCTYPE html>
<html>
<head>
<style>

.square-1, .square-2 {
  width: 100px;
  height: 100px;
  margin: 5px;
  background: #2a9d8f;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: move 4s;
}
    
.square-1 {
  animation-iteration-count: 3;
}
.square-2 {
  animation-iteration-count: infinite;
}

@keyframes move {
  from {left: 0px;}
  to {left: 250px;}
}
</style>
</head>
<body>

<div class="square-1">1</div>
<div class="square-2">2</div>
   
</body>
</html>

Output:

Square-1 will play the animation three times. Square-2 will play the animation forever.

1
2

Click on the square to repeat the animation.


Enjoy coding!