How to Play and Pause CSS Animations with CSS Custom Properties

Play and pause of CSS animations: Use CSS custom properties to fine control

This article discusses CSS @keyframes animation, focusing on how to pause and control animation. Although animation-play-state property can be used to cooperate with JavaScript for control, there are many details. We will introduce a more flexible setup method that uses CSS custom properties to enable fine control of animations.

The importance of pausing animations

When developing a CSS-driven slide, I noticed an interesting phenomenon: animations that are not in the window are still running! This makes me think: Are these running animations still consuming CPU/GPU resources, thus affecting page performance?

Although the DevTools' performance panel cannot directly display the animation consumption of "off-screen" frames, the animation does not pause when scrolling away from the slide and returning again, but continues to run to the next screen.

Therefore, it is crucial to study how animations are paused, which is related to:

1. Performance: Avoid unnecessary resource consumption.
2. Control: Provides user control over animation.
3. Accessibility: Considering that some users may be sensitive to animations.

Basic ways to pause animation

In CSS, the only way to pause the animation is to use animation-play-state property and set its value to paused :

 .paused {
  animation-play-state: paused;
}

In JavaScript, this property is animationPlayState , and the setting method is as follows:

 element.style.animationPlayState = 'paused';

We can create a play/pause toggle by reading the current value of animationPlayState :

 const running = element.style.animationPlayState === 'running';
element.style.animationPlayState = running ? 'paused' : 'running';

Another way to pause animation is to set animation-duration to 0s . The animation is actually still running, but since the duration is zero, no action is seen. However, this is not a real pause.

Direct removal of animation ( animation: none !important; ) is not a real pause either.

Custom properties with data attributes and CSS

We use data attributes (such as data-animation ) as the CSS selector and use CSS custom attributes as the value of the animation attribute:

<div data-animation=""></div>

 [data-animation] {
  animation:
    var(--animn, none)
    var(--animdur, 1s)
    var(--animtf, linear)
    var(--animdel, 0s)
    var(--animic, infinite)
    var(--animdir, alternate)
    var(--animfm, none)
    var(--animps, running);
}

Through custom properties, we can control all aspects of the animation. The advantage of CSS custom properties is that they can be read and set in CSS and JavaScript, and can reduce the amount of CSS code.

The animation itself uses a class selector and updates the variables in the [data-animation] selector:

 /* Animation class*/
.a-pulse {
  --animn: pulse;
}
.a-slide {
  --animdur: 3s;
  --animn: slide;
}

/* Keyframe*/
@keyframes pulse {
  /* ... */
}
@keyframes slide {
  /* ... */
}

Example: Use checkbox trick to pause animation

Create a checkbox to control pauses for all animations:

<input type="checkbox" id="data-animation-pause">

 [data-animation-pause]:checked ~ [data-animation] {
  --animps: paused;
}

Click the check box to pause/play all animations without JavaScript.

CSS-only slideshow

I use<details></details> Tags create a slide that automatically switches the slides through the active animation autoplay , each slide has its own secondary animation. The --animps attribute controls the playback status of the animation, --img-animps attribute controls the playback status of the secondary animation.

To prevent GPU overload, ideally, the main animation should pause all secondary animations. Chrome browser (currently) can update CSS custom properties from @keyframes animation.

Update --img-animps property in the main animation @keyframes :

 @keyframes autoplay {
  /* ... */
  51% { --img-animps: paused } /* Stop! */
  /* ... */
}

In order to be compatible with other browsers, the initial value needs to be set to running .

Enable prefers-reduced-motion

We can use prefers-reduced-motion media query to respond to user preferences:

 @media (prefers-reduced-motion) {
  [data-animation="alternate"] {
    --animdur: 4s;
    --animn: opacity;
  }
  /* ... */
}

Pause animation using JavaScript

We can use JavaScript to iterate through all [data-animation] elements and switch the --animps attribute:

 // ... JavaScript code...

Using IntersectionObserver

To automatically play and pause animations, we can use IntersectionObserver :

 // ... JavaScript code...

Add audio to the slide (Bonus)

Add an audio tag and control its playback and pause in JavaScript:

<audio src="your-audio.mp3"></audio>

 // ... JavaScript code...

Through the above methods, we can flexibly control the playback and pause of CSS animations, and improve page performance and accessibility.

The above is the detailed content of How to Play and Pause CSS Animations with CSS Custom Properties. For more information, please follow other related articles on the PHP Chinese website!