动画是突出互动元素并为设计增添趣味和趣味的好方法。在本单元中，您将了解如何使用 CSS 添加和控制动画效果。
有时您会在界面上看到一些小帮助程序，点击这些小程序可提供有关该特定部分的实用信息。这些动画通常带有闪烁的动画，可让您巧妙地知道信息确实存在并且应该与之互动。那么，如何使用 CSS 来达到此目的呢？
在 CSS 中，您可以使用 CSS 动画制作此类动画，从而使用关键帧设置动画序列。 动画可以是简单的单状态动画，也可以是复杂的基于时间的序列。
什么是关键帧？
在动画软件、CSS 和大多数可让您为内容添加动画效果的工具中，关键帧是用来为时间轴上时间戳分配动画状态的机制。
我们使用“脉搏器”作为上下文。整个动画会运行 1 秒，并在 2 种状态下运行。
其中每种动画状态的开始和结束位置都在特定点上。您需要使用关键帧在时间轴上绘制这些元素。
@keyframes
现在您已经了解了什么是关键帧，这些知识应该能够帮助您理解 CSS @keyframes 规则的运作方式。以下是具有两种状态的基本规则。
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
要注意的第一部分是自定义 ID（自定义标识符），从更通俗易懂的角度来说，就是关键帧规则的名称。此规则的标识符为 my-animation。自定义标识符的作用类似于函数名称。正如您在函数模块中学到的那样，您可以在 CSS 代码中的其他位置引用关键帧规则。
在关键帧规则内，from 和 to 是表示 0% 和 100%（动画的开头和结尾）的关键字。您可以重新创建相同的规则，如下所示：
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
您可以在时间范围内添加任意数量的排名。 根据“脉搏器”示例的上下文，有 2 种状态，可转换为 2 个关键帧。 也就是说，您的关键帧规则中有 2 个位置，用于表示每个关键帧的变化。
@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}
animation 属性
如需在 CSS 规则中使用 @keyframes，请定义各种动画属性，或者使用 animation 简写属性。
animation-duration
.my-element {
animation-duration: 10s;
}
animation-duration 属性用于定义 @keyframes 时间轴的时长。它应该是时间值。
默认设置为 0 秒，表示动画仍会运行，但播放速度过快，您无法看到。时间值不能为负数。
animation-timing-function
为在动画中重现自然动作，您可以使用计时函数来计算动画在每个点的速度。计算值通常是曲线的，使得动画在 animation-duration 过程中以可变速度运行，如果计算的值超过了 @keyframes 中定义的值，则让元素看起来像是弹跳。
CSS 中有几个关键字可用作预设，它们用作 animation-timing-function 的值：linear、ease、ease-in、ease-out、ease-in-out。
.my-element {
animation-timing-function: ease-in-out;
}
值通过加/减速函数显示为曲线，因为加/减速曲线是使用贝塞尔曲线（用于对速度建模）计算得出的。每个计时函数关键字（例如 ease）都引用了预定义的贝塞尔曲线。在 CSS 中，您可以使用 cubic-bezier() 函数直接定义贝塞尔曲线，该函数接受四个数值：x1、y1、x2、y2。
.my-element {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}
这些值沿 X 轴和 Y 轴绘制曲线的各个部分。
理解贝塞尔曲线是一个复杂且直观的工具，例如 Lea Verou 的这个生成器非常有用。
steps 加/减速函数
有时，您可能希望更精细地控制动画，而不是沿着曲线移动，而是想按间隔移动。借助 steps() 加/减速函数，您可以将时间轴拆分为定义的相等间隔。
.my-element {
animation-timing-function: steps(10, end);
}
第一个参数是步数。 如果将步数定义为 10，并且有 10 个关键帧，那么每个关键帧将按照确切的时长依次播放，并且状态之间没有过渡。如果各步骤的关键帧不足，系统会根据第二个参数添加关键帧之间的步骤。
第二个参数是方向。
如果设置为 end（默认值），则相关步骤会在时间轴的末尾完成。如果设置为 start，则动画的第一步会在开始时立即完成，这意味着它比 end 早一个步骤结束。
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
animation-iter-count 属性会定义 @keyframes 时间轴的运行次数。默认情况下，值为 1，表示当动画到达时间轴的终点时，它会在结束处停止。
该数字不能为负数。
您可以使用 infinite 关键字来循环播放动画，这就是本课开头的“pulser”演示的工作原理。
animation-direction
.my-element {
animation-direction: reverse;
}
您可以使用 animation-direction 设置时间轴在关键帧上的运行方向：
normal：默认值，是转发的。reverse：在您的时间轴上反向运行。alternate：对于每次动画迭代，时间轴都会按顺序向前或向后运行。alternate-reverse：alternate的反转值。
animation-delay
.my-element {
animation-delay: 5s;
}
animation-delay 属性会定义启动动画前的等待时间。
与 animation-duration 属性一样，此属性接受时间值。
与 animation-duration 属性不同，您可以将此属性定义为负值。如果您设置了负值，@keyframes 中的时间轴将从该点开始。例如，如果动画时长为 10 秒，并且您将 animation-delay 设为 -5s，那么动画会从时间轴的一半处开始播放。
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
借助 animation-play-state 属性，您可以播放和暂停动画。默认值为 running；如果将其设置为 paused，则会暂停动画。
animation-fill-mode
animation-fill-mode 属性会定义 @keyframes 时间轴中的哪些值在动画开始前或结束之后会保留。默认值为 none，表示当动画完整播放时，时间轴中的值会被舍弃。
其他选项包括：
forwards：系统会根据动画方向持续保留最后一个关键帧。backwards：第一个关键帧将根据动画方向持续显示。both：遵循forwards和backwards的规则。
animation 简写形式
您可以使用 animation 简写形式定义它们，而无需单独定义所有属性，这样您就可以按以下顺序定义动画属性：
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state
.my-element {
animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}
使用动画时的注意事项
用户可以在操作系统中定义他们更喜欢在与应用和网站互动时减少运动。可以使用 prefers-reduced-motion 媒体查询检测此偏好设置。
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
这不一定是倾向于不使用动画，而是倾向于减少动画，尤其是出乎意料的动画。 如需详细了解此偏好设置和整体性能，请参阅此动画指南。
检查您的掌握程度
测试您对动画知识的掌握情况
@keyframes 动画的名称或自定义标识符是否区分大小写？
SWOOP 和 swoop 共存。关键字 from 和 to 等同于
end，温度为 start。100%，温度为 0%。from 等同于 0%，to 等同于 100%。0和1animation-timing-function 通常也称为
@keyframes 动画中至少需有多少个关键帧？