如何使用CSS自定义属性播放和暂停CSS动画

CSS动画的播放和暂停：使用CSS自定义属性精细控制

本文探讨CSS @keyframes动画，重点讲解如何暂停和控制动画。虽然可以使用animation-play-state属性配合JavaScript进行控制，但其中细节颇多。我们将介绍一种更灵活的设置方法，它利用CSS自定义属性来实现对动画的精细控制。

暂停动画的重要性

在开发CSS驱动的幻灯片时，我注意到一个有趣的现象：不在视窗内的动画仍在运行！这让我思考：这些运行的动画是否仍在消耗CPU/GPU资源，从而影响页面性能？

虽然DevTools的性能面板无法直接显示“屏幕外”帧的动画消耗，但在滚动离开幻灯片后，再返回时，动画并未暂停，而是继续运行到下一个画面。

因此，研究动画的暂停方式至关重要，这关系到：

1. 性能: 避免不必要的资源消耗。
2. 控制: 提供用户对动画的控制权。
3. 可访问性: 考虑到部分用户可能对动画敏感。

暂停动画的基础方法

在CSS中，暂停动画的唯一方法是使用animation-play-state属性，并将其值设置为paused：

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

在JavaScript中，该属性为animationPlayState，设置方法如下：

element.style.animationPlayState = 'paused';

我们可以通过读取animationPlayState的当前值来创建播放/暂停切换：

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

另一种暂停动画的方法是将animation-duration设置为0s。动画实际上仍在运行，但由于持续时间为零，所以不会看到任何动作。然而，这并非真正的暂停。

直接移除动画（animation: none !important;）也不是真正的暂停。

使用数据属性和CSS自定义属性

我们使用数据属性（例如data-animation）作为CSS选择器，并使用CSS自定义属性作为动画属性的值：

<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);
}

通过自定义属性，我们可以控制动画的各个方面。CSS自定义属性的优势在于：它们可以在CSS和JavaScript中读取和设置，并能减少CSS代码量。

动画本身使用类选择器，并更新[data-animation]选择器中的变量：

/* 动画类 */
.a-pulse {
  --animn: pulse;
}
.a-slide {
  --animdur: 3s;
  --animn: slide;
}

/* 关键帧 */
@keyframes pulse {
  /* ... */
}
@keyframes slide {
  /* ... */
}

示例：使用复选框技巧暂停动画

创建一个复选框来控制所有动画的暂停：

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

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

点击复选框即可暂停/播放所有动画，无需JavaScript。

CSS-only幻灯片

我使用<details></details>标签制作了一个幻灯片，通过主动画autoplay自动切换幻灯片，每个幻灯片有自己的次要动画。--animps属性控制动画的播放状态，--img-animps属性控制次要动画的播放状态。

为了防止GPU过载，理想情况下，主动画应该暂停所有次要动画。Chrome浏览器（目前）可以从@keyframes动画中更新CSS自定义属性。

在主动画@keyframes中更新--img-animps属性：

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

为了兼容其他浏览器，初始值需要设置为running。

启用prefers-reduced-motion

我们可以使用prefers-reduced-motion媒体查询来响应用户的偏好：

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

使用JavaScript暂停动画

我们可以使用JavaScript来遍历所有[data-animation]元素并切换--animps属性：

// ... JavaScript代码 ...

使用IntersectionObserver

为了自动播放和暂停动画，我们可以使用IntersectionObserver：

// ... JavaScript代码 ...

在幻灯片中添加音频（Bonus）

添加一个音频标签，并在JavaScript中控制其播放和暂停：

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

// ... JavaScript代码 ...

通过以上方法，我们可以灵活地控制CSS动画的播放和暂停，并提升页面性能和可访问性。

以上是如何使用CSS自定义属性播放和暂停CSS动画的详细内容。更多信息请关注PHP中文网其他相关文章！