Tutorials


CSS animation-play-state property


The animation-play-state property in CSS controls whether an animation is running or paused. It allows you to start or stop an animation dynamically without altering the animation's keyframes or other properties. This property is useful for controlling animations based on user interactions, such as clicking a button to start or pause an animation.

Syntax

element {
  animation-play-state: state;
}
  • state: Defines the play state of the animation. It can be one of the following values:
    • running
    • paused

Values

  1. running:

    • The animation is currently running. It plays according to the defined @keyframes and any other animation properties set.
    animation-play-state: running;

  2. paused:

    • The animation is paused. It will not progress until the animation-play-state is set back to running.
    animation-play-state: paused;

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animation Play State Example</title>
  <style>
    @keyframes move {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(200px);
      }
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: move;
      animation-duration: 4s;
      animation-play-state: paused;
    }

    .box.running {
      animation-play-state: running;
    }
  </style>
</head>
<body>
  <div class="box" id="animateBox"></div>
  <button onclick="toggleAnimation()">Toggle Animation</button>

  <script>
    function toggleAnimation() {
      const box = document.getElementById('animateBox');
      if (box.classList.contains('running')) {
        box.classList.remove('running');
        box.style.animationPlayState = 'paused';
      } else {
        box.classList.add('running');
        box.style.animationPlayState = 'running';
      }
    }
  </script>
</body>
</html>

Explanation:

  • @keyframes move:

    • Defines an animation that moves the element from 0px to 200px horizontally.

  • .box:

    • The element has an animation named move with a duration of 4 seconds.
    • The animation-play-state is initially set to paused, so the animation does not play until explicitly started.

  • .box.running:

    • When the class running is added, the animation-play-state changes to running, causing the animation to start.

  • JavaScript Function:

    • The toggleAnimation function toggles the animation's play state between paused and running when the button is clicked.

Important Points

  1. Default Value:

    • The default value for animation-play-state is running. If not explicitly set, animations will play normally.

  2. Interaction with Other Animation Properties:

    • The animation-play-state property affects whether the animation is actively running or paused, but it does not change the animation's duration, delay, iteration count, or keyframes.

  3. Control via JavaScript:

    • The property can be dynamically controlled using JavaScript to provide interactive experiences, such as pausing animations on user interaction or resuming them based on events.

  4. No Effect on Animation State:

    • When paused, the animation retains its state as of the last frame before being paused. It does not restart from the beginning when resumed.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about