How to Create and Customize Animations in CSS

Code Playground is only enabled on larger screen sizes.

Animation Iteration Count

Iteration

infinite

The examples we saw before all have infinite iterations for demonstration purposes. But, by default, the animation only plays once, and finishes.

With the animation-iteration-count property, you can define how many times the animation repeats:

css

div {
  /* . . . */
 
  animation-name: change-bg-color;
  animation-duration: 4s;
 
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
 
  animation-iteration-count: 3;
}

If you want the animation to repeat indefinitely, set to infinite:

css

div {
  /* . . . */
 
  animation-name: change-bg-color;
  animation-duration: 4s;
 
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
 
  animation-iteration-count: infinite;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="/styles.css">
</head>

<body>
  <div class="two-kf-animation">2 Keyframes Animation</div>

  <div class="four-kf-animation">4 Keyframes Animation</div>
</body>

</html>

Open Sandbox

Loading course content...