Control of animation playback status

Animation Playback State Control

Controlling the playback state of CSS animations is one of the core capabilities in front-end development for achieving dynamic interactive effects. Through the animation-play-state property, developers can precisely pause and resume animations, a method that is more efficient and easier to maintain than using JavaScript alone.

Basic Properties and Syntax

The animation-play-state property accepts two key values:

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

• running: The animation plays normally (default value)
• paused: The animation pauses on the current frame

This property is often used in conjunction with other animation properties:

.box {
  animation: slide 2s linear infinite;
  animation-play-state: paused;
}

Practical Application Scenarios

User Interaction Control

The most common scenario is controlling animation states through user interaction. The following example demonstrates how to use a checkbox to control an animation:

<style>
  .toggle:checked ~ .box {
    animation-play-state: running;
  }
  .box {
    width: 100px;
    height: 100px;
    background: coral;
    animation: bounce 1s alternate infinite;
    animation-play-state: paused;
  }
  @keyframes bounce {
    to { transform: translateY(50px); }
  }
</style>

<input type="checkbox" id="toggle" class="toggle">
<label for="toggle">Play/Pause</label>
<div class="box"></div>

Scroll-Triggered Animations

Combining with the Intersection Observer API to achieve scroll control:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    entry.target.style.animationPlayState = 
      entry.isIntersecting ? 'running' : 'paused';
  });
});

document.querySelectorAll('.animate-on-scroll').forEach(el => {
  observer.observe(el);
});

Advanced Control Techniques

Synchronized Control of Multiple Animations

When an element has multiple animations applied, use comma-separated state values:

.multi-animation {
  animation: 
    fadeIn 2s,
    rotate 4s linear infinite;
  animation-play-state: paused, running;
}

Precise Control with JavaScript

Achieve frame-level control through the DOM API:

const box = document.querySelector('.box');
// Pause the animation
box.style.animationPlayState = 'paused';
// Get the current animation time
const animation = box.getAnimations()[0];
console.log(animation.currentTime);
// Set a specific playback time
animation.currentTime = 500;

Performance Optimization Tips

1. Hardware Acceleration: Enable GPU acceleration for animations using transform and opacity

.optimized {
  will-change: transform;
  transform: translateZ(0);
}

2. Reduce Repaints: Avoid modifying properties like width and height in animations, which trigger layout changes

3. Composite Animations: Combine multiple property changes into a single animation declaration

/* Not recommended */
@keyframes bad-example {
  50% { transform: scale(1.2); }
  50% { background: blue; }
}
/* Recommended */
@keyframes good-example {
  50% { 
    transform: scale(1.2);
    background: blue;
  }
}

Browser Compatibility Solutions

For older browsers that do not support animation-play-state, use JavaScript for fallback solutions:

function toggleAnimation(element) {
  const animations = element.getAnimations();
  if('play' in animations[0]) {
    // Modern browsers
    animations.forEach(anim => {
      anim.playState === 'paused' ? anim.play() : anim.pause();
    });
  } else {
    // Legacy solution
    const style = element.style;
    style.animationPlayState = 
      style.animationPlayState === 'paused' ? 'running' : 'paused';
  }
}

Integration with Web Animations API

Modern browsers support the more powerful Web Animations API:

const element = document.querySelector('.animated');
const animation = element.animate([
  { transform: 'rotate(0deg)' },
  { transform: 'rotate(360deg)' }
], {
  duration: 1000,
  iterations: Infinity
});

// Precise control
animation.pause();
animation.play();
animation.reverse();
animation.currentTime = 200; // Jump to a specific time point

Common Issue Solutions

Issue 1: Animation state not maintained after pausing

/* Incorrect solution */
.paused-animation {
  animation: none; /* This completely removes the animation */
}

/* Correct solution */
.paused-animation {
  animation-play-state: paused;
}

Issue 2: Stepped animations (steps) displaying intermediate frames when paused

.jumpy-animation {
  animation: 
    moveSprite 1s steps(4) infinite;
  animation-play-state: paused;
}
/* Add this rule to ensure complete frames are displayed when paused */
.jumpy-animation[style*="paused"] {
  animation-iteration-count: 1;
}

Creative Implementation Examples

Creating a controllable progress indicator:

<style>
  .progress {
    height: 20px;
    background: linear-gradient(to right, #4cd964, #5ac8fa);
    animation: load 5s linear forwards;
    animation-play-state: paused;
  }
  @keyframes load {
    to { width: 100%; }
  }
</style>

<div class="progress"></div>
<button onclick="document.querySelector('.progress').style.animationPlayState='running'">
  Start Loading
</button>