CSS animation-play-state

The animation-play-state property in CSS determines whether an animation is running or paused. It allows you to control the playback of CSS animations.

The value of this property can be set to either running or paused. When set to running, the animation is playing. When set to paused, the animation is paused.

Here is the syntax for using the animation-play-state property:


.element {
  animation-play-state: running | paused;
}

Result:

In the example above, the .box element will have its animation playing or paused based on the value of the animation-play-state property.

Let's create a simple example to demonstrate how the animation-play-state property works:


    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      animation: move 2s linear infinite;
      animation-play-state: running;
    }
    
    @keyframes move {
      0% { transform: translateX(0); }
      50% { transform: translateX(200px); }
      100% { transform: translateX(0); }
    }

Result:

In the example above, the blue box will move from left to right and back in an infinite loop. You can click on the box to toggle between pausing and playing the animation.