Pausing, Stopping, and Hiding Animations with animation-play-state

When working with animations, it’s essential to ensure they are accessible to everyone. According to WCAG SC 2.2.2: Pause, Stop, Hide, users must be able to pause, stop, or hide animations that last more than 5 seconds. Let's break down how you can use CSS and JavaScript to create an animation that users can control.

A simple animation

We'll start by creating a simple animation using CSS keyframes. This animation moves a box horizontally across the screen.

<div class="animated-box"></div>

<style>
  .animated-box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    animation: move 4s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }
</style>

Adding play state

Next, we introduce the animation-play-state property. This property allows us to control whether the animation is running or paused. We use a CSS variable, --play-state, to set the default state of the animation.

:root {
  --play-state: running;
}

.animated-box {
  animation-play-state: var(--play-state);
}

Here, we define a --play-state variable at the root level and set its initial value to running. The animation will run initially, but this variable gives us a way to control it later.

Adding control with javascript

We add a button that allows users to pause/play the animation by updating the --play-state variable

<button id="toggle-btn">Pause Animation</button>

<script>
  const toggleButton = document.getElementById('toggle-btn');
  const root = document.documentElement;

  toggleButton.addEventListener('click', () => {
    const currentPlayState = getComputedStyle(root).getPropertyValue('--play-state').trim();

    if (currentPlayState === 'running') {
      root.style.setProperty('--play-state', 'paused');
      toggleButton.textContent = 'Resume Animation';
    } else {
      root.style.setProperty('--play-state', 'running');
      toggleButton.textContent = 'Pause Animation';
    }
  });
</script>

We use getComputedStyle to get the current value of the --play-state variable. Depending on whether the animation is running or paused, we toggle the value and also update the text of the button accordingly.

You can find the complete working example on codepen

By implementing simple solutions like animation-play-state and providing controls for animations, you help create a more inclusive digital experience.