animation-play-state

Definition

The animation-play-state property can be used to control the play state of an animation using JavaScript or other programming languages. For example, you might use it to pause an animation when a user clicks a button, or to resume an animation when the user moves their mouse over an element. The animation-play-state property in CSS is used to specify whether an animation is currently running or paused.

Examples

Pause an animation when a user clicks a button:

.element {
  animation-name: myAnimation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes myAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

button {
  /* Pause the animation when the button is clicked */
  &:active .element {
    animation-play-state: paused;
  }
}

Resume an animation when the user moves their mouse over an element:

.element {
  animation-name: myAnimation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-play-state: paused; /* Pause the animation */
}

@keyframes myAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Resume the animation when the mouse enters the element */
.element:hover {
  animation-play-state: running;
}

Values

Best Practices

• Use the animation-play-state property in conjunction with the animation-name, animation-duration, and animation-timing-function properties to define an animation. If any of these are not set, the animation will not run.
• Use the animation-play-state property to pause and resume an animation as needed, rather than stopping and starting the animation from the beginning. This can help to make the animation more seamless and natural.
• Consider the user experience when designing your animations. Animations should enhance the user experience, rather than detracting from it.
• Test the animation on different devices and browsers to ensure that it works as intended. Different browsers and devices may handle animations differently, so it is important to test and debug as necessary.
• Use the animation-delay property to add a delay before the animation starts, or to add a delay between iterations of the animation. This can help to make the animation more seamless and natural.

Browser Compatibility