CSS：权威指南，第 5 版

第 19 章 动画 动画

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

CSS过渡在上一章中已经介绍过，它可以通过 DOM 状态的变化触发简单的动画，并从开始状态进入结束状态。 CSS动画与转场效果类似，CSS 属性的值会随着时间的推移而发生变化，但动画对发生变化的方式提供了更多的控制。具体来说，CSS 关键帧动画可以让我们决定动画是否重复以及如何重复，还可以让我们对整个动画过程中发生的事情进行细化控制，等等。 转场动画会触发隐式属性值变化，而应用关键帧动画时则会显式执行动画。

利用 CSS 动画，你可以改变不属于元素的设置前或设置后状态的属性值。在动画元素上设置的属性值并不一定是动画进程的一部分。例如，在使用过渡效果时，从黑到白的动画效果只会经过各种灰色调。而使用动画时，同一元素在动画过程中不一定是黑色或白色，甚至不一定介于灰色之间。

虽然您可以在灰色中过渡，但您也可以将元素变为黄色，然后从黄色到橙色。或者，你也可以在各种颜色之间切换，从黑色开始，到白色结束，但沿途要经过整个彩虹。

提示

查找 "播放 "符号 了解在线示例的可用性。本章的所有示例均可在https://meyerweb.github.io/csstdg5figs/19-animation 上找到。

适应癫痫发作和前庭障碍

警告

虽然你可以使用动画来创建不断变化的内容，但反复快速变化的内容可能会导致某些用户癫痫发作。 请始终牢记这一点，并确保癫痫和其他发作性疾病患者可以访问您的网站。

我们通常不会在章节开头提出警告，但在这种情况下，警告是有必要的。 视觉变化，尤其是快速的视觉变化，会引发容易癫痫发作的用户出现医疗紧急情况。 对于前庭失调（晕动病）的用户来说，它们也会引起严重不安。

要降低或消除这种风险，可使用prefers-reduced-motion 媒体查询（参见第 21 章）。 这样，当用户在浏览器或操作系统中设置了 "减少动作 "或类似的偏好设置时，就可以应用样式。可以考虑采用这种方法：

@media (prefers-reduced-motion) {
  * {animation: none !important; transition: none !important;}
}

假设没有指定其他!important 动画（也不应该指定），这将禁用所有动画和过渡效果。 这不是一个细致入微或完美的解决方案，但这是第一步。 你可以反其道而行之，将所有动画和转场效果分隔在一个媒体块中，让那些没有启用运动减弱功能的人也能看到，就像这样：

@media not (prefers-reduced-motion) {
  /* all animations and transitions */
}

并非所有的动画都是危险或令人迷失方向的，为所有用户提供至少一些动画可能是必要的。过渡和动画可以很好地帮助用户了解发生了哪些变化，并引导他们关注特定内容。在这种情况下，可使用prefers-reduced-motion 来淡化对理解用户界面至关重要的动画，并关闭那些不重要的动画。

定义关键帧

要 一个元素的动画，需要引用关键帧动画的名称；为此，我们需要一个命名的关键帧动画。第一步是使用@keyframes at-rule 定义这个可重复使用的 ...