动画

CSS 播客 - 022：动画

有时您会在界面上看到一些小助手，单击它们时，会提供关于该特定部分的有用信息。这些助手通常具有脉冲动画，以微妙地告知您信息在那里，并且应该与之互动。本模块向您展示如何使用 CSS 创建这些助手和其他动画。

您可以使用 CSS 通过关键帧设置动画序列。这些序列可以是基本的单状态动画，也可以是复杂的基于时间的序列。

什么是关键帧？

在大多数动画工具中，关键帧是您用来将动画状态分配给时间轴上时间戳的机制。

例如，这是脉冲“助手”点的时序图。动画运行 1 秒，并具有 2 个状态。

The states of the pulser animation over the 1 second timeframe

每个动画状态都有一个特定的开始和结束点。您可以使用关键帧在时间轴上标出这些点。

The same diagram as before, but this time, with keyframes

@keyframes

浏览器支持

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

来源

CSS @keyframes 基于与动画关键帧相同的概念。

这是一个具有两种状态的示例

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

第一个重要部分是自定义标识符 (custom-ident)，即关键帧规则的名称。在此示例中，标识符为 my-animation。自定义标识符的作用类似于函数名称，让您可以在 CSS 代码的其他位置引用关键帧规则。

在关键帧规则内部，from 和 to 是关键字，分别表示 0% 和 100%，即动画的开始和结束。您可以像这样重新创建相同的规则

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

您可以在时间范围内添加任意多个位置。在脉冲助手示例中，有两个状态，它们转换为两个关键帧。这意味着您的关键帧规则内部有两个位置来表示每个关键帧的更改。

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

animation 属性

浏览器支持

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

来源

要在 CSS 规则中使用 @keyframes，您可以单独定义各种动画属性，也可以使用 animation 简写属性。

animation-duration

浏览器支持

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

来源

.my-element {
    animation-duration: 10s;
}

animation-duration 属性将 @keyframes 时间轴定义为时间值的时长。默认值为 0 秒，这意味着动画仍在运行，但速度太快，您看不到。您不能使用负时间值。

animation-timing-function

浏览器支持

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

来源

为了帮助在动画中重现自然运动，您可以使用计时函数来计算动画在每个点的速度。计算值通常是弯曲的，使动画在 animation-duration 的过程中以可变速度运行，并且如果浏览器计算出的值超出 @keyframes 中定义的值，则使元素看起来像在弹跳。

CSS 中有几个关键字可用作预设，它们用作 animation-timing-function 的值：linear、ease、ease-in、ease-out、ease-in-out。

.my-element {
    animation-timing-function: ease-in-out;
}

缓动函数值看起来是弯曲的，因为缓动是使用 Bézier 曲线（一种用于模拟速度的函数）计算的。每个计时函数关键字（例如 ease）都引用预定义的 Bézier 曲线。在 CSS 中，您可以使用 cubic-bezier() 函数直接定义 Bézier 曲线，该函数接受四个数字值：x1、y1、x2、y2。

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

这些值沿着 X 轴和 Y 轴绘制曲线的每个部分。

A bézier on a progression vs time chart

理解 Bézier 曲线很复杂。可视化工具（例如 Lea Verou 的这个生成器）非常有用。

steps 缓动函数

有时您可能希望通过按间隔移动而不是沿着曲线移动来更精细地控制动画。steps() 缓动函数允许您将时间轴分成定义好的等持续时间的间隔。

.my-element {
    animation-timing-function: steps(10, end);
}

第一个参数是步数。如果关键帧的数量与步数相同，则每个关键帧按顺序播放其步长的确切持续时间，状态之间没有过渡。如果关键帧少于步数，则浏览器会根据第二个参数在关键帧之间添加步数。

第二个参数是方向。如果设置为 end（默认值），则步长在时间轴末尾完成。如果设置为 start，则动画的第一步在开始后立即完成，这意味着它比 end 早一步结束。

animation-iteration-count

浏览器支持

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

来源

.my-element {
    animation-iteration-count: 10;
}

animation-iteration-count 属性定义 @keyframes 时间轴在动画期间应运行多少次。默认情况下，此值为 1，这意味着动画在到达时间轴末尾时停止。此值不能为负数。

要使动画循环，请将迭代计数设置为 infinite。这就是本课开始时的脉冲动画的工作方式。

animation-direction

浏览器支持

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

来源

.my-element {
    animation-direction: reverse;
}

您可以使用 animation-direction 设置时间轴在关键帧上运行的方向，它采用以下值

  • normal：默认值，即向前。
  • reverse：在时间轴上向后运行。
  • alternate：对于每次动画迭代，时间轴在向前运行和向后运行之间交替。
  • alternate-reverse：类似于 alternate，但动画从时间轴向后运行开始。

animation-delay

浏览器支持

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

来源

.my-element {
    animation-delay: 5s;
}

animation-delay 属性定义浏览器在开始动画之前等待多长时间。与 animation-duration 属性一样，此属性接受时间值。

与 animation-duration 不同，您可以将 animation-delay 定义为负值，这将使动画从时间轴中的相应点开始。例如，如果您的动画时长为 10 秒，并且您将 animation-delay 设置为 -5s，则动画将从时间轴的一半开始。

animation-play-state

浏览器支持

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

来源

.my-element:hover {
    animation-play-state: paused;
}

animation-play-state 属性允许您播放和暂停动画。默认值为 running。如果将其设置为 paused，则动画暂停。

animation-fill-mode

浏览器支持

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

来源

animation-fill-mode 属性定义 @keyframes 时间轴中的哪些值在动画开始之前或结束后持续存在。默认值为 none，这意味着当动画完成时，时间轴中的值将被丢弃。其他选项包括

  • forwards：最后一个关键帧持续存在，基于动画方向。
  • backwards：第一个关键帧持续存在，基于动画方向。
  • both：第一个和最后一个关键帧都持续存在。

animation 简写

您可以将动画属性定义为 animation 简写形式，而不是分别定义每个属性，它允许您按以下顺序定义动画属性

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-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 动画的名称或自定义标识符是否区分大小写？

是
🎉
否
CSS 不允许 2 个动画具有相同的名称，但允许 SWOOP 和 swoop 共存。

关键字 from 和 to 与以下项相同

start 和 end。
再试一次！
0% 和 100%。
from 与 0% 相同，to 与 100% 相同。
0 和 1
再试一次！

animation-timing-function 也通常称为

动态计时
再试一次！
延迟
再试一次！
缓动
🎉

@keyframes 动画中至少需要多少个关键帧？

1
浏览器会将元素的当前状态作为关键帧，因此至少需要 1 个关键帧。
2
再试一次！
3
再试一次！
4
再试一次！