Skip to main content

CSS Animation Properties (Live Playground)

To create more dynamic and engaging web designs, it's essential to have a solid understanding of various CSS animation properties. In this tutorial, you'll learn about controlling different animation properties using simple code examples and clear explanations.

animation-iteration-count​

The animation-iteration-count property specifies how many times the animation should repeat. You can use a number or the keyword infinite to make the animation loop indefinitely.

Example:

CSS
div {
  animation: changeBackgroundColor 3s ease-in-out 1s infinite;
}

animation-direction​

The animation-direction property defines the direction of the animation. The default value is normal, which plays the animation from start to end. Other possible values include reverse, alternate, and alternate-reverse.

  • reverse: Plays the animation in reverse, starting from the end and moving towards the start.
  • alternate: Alternates the animation direction between normal and reverse for each iteration.
  • alternate-reverse: Similar to alternate, but starts with a reverse iteration.

Example:

CSS
div {
  animation: changeBackgroundColor 3s ease-in-out 1s infinite alternate;
}

animation-fill-mode​

The animation-fill-mode property determines how an element should be styled before the animation starts and after it ends. Possible values include none, forwards, backwards, and both.

  • none: The default value, the element's styles remain unchanged before and after the animation.
  • forwards: The element retains the styles from the last keyframe when the animation ends.
  • backwards: The element takes on the styles from the first keyframe before the animation starts.
  • both: Combines the effects of forwards and backwards.

Example:

CSS
div {
  animation: changeBackgroundColor 3s ease-in-out 1s infinite alternate;
  animation-fill-mode: both;
}

animation-play-state​

The animation-play-state property allows you to control whether an animation is running or paused. Possible values are running and paused.

Example:

CSS
div {
  animation: changeBackgroundColor 3s ease-in-out 1s infinite alternate;
  animation-fill-mode: both;
  animation-play-state: running;
}

div:hover {
  animation-play-state: paused;
}

In this example, the animation is running by default but pauses when the user hovers over the div.

Live Playground, Try it Yourself

Conclusion​

By mastering various CSS animation properties, you can create more dynamic and engaging web designs. These properties allow you to fine-tune your animations and enhance the overall appearance and user experience of your projects.