动画

动画是突出显示互动元素并增加兴趣的好方法 让设计充满乐趣在本单元中，您将了解如何 添加动画效果

有时，您会在界面上看到一些小帮助程序， 有关您点击时所在部分的信息。这些通常具有 闪烁的动画，巧妙地告诉你信息已经存在 应该与之互动 本单元将介绍如何使用 CSS。

闪烁图标是确保用户安心的一种方法 注意重要信息

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

什么是关键帧？

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

例如，以下是闪烁的“helper”的时间轴点。动画运行 时长为 1 秒并具有 2 种状态。

<ph type="x-smartling-placeholder">

</ph>

脉冲动画的状态。

每种动画状态都有开始和结束的特定时间点。 您可以使用关键帧在时间轴上映射这些元素。

<ph type="x-smartling-placeholder">

</ph>

带有关键帧的脉动动画。

@keyframes

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 43
• <ph type="x-smartling-placeholder"></ph> 12
• <ph type="x-smartling-placeholder"></ph> 16
• <ph type="x-smartling-placeholder"></ph> 9 个

来源

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

下面是一个具有两种状态的示例：

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

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

注意 ：<custom-ident> 用于 CSS 中的各个位置，以便您提供 自定义自己的姓名这些标识符区分大小写， 还会出现您不可能用到的字词例如，在 CSS 文件内为代码行命名时 网格，则不能使用 span 一词。

在关键帧规则内，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;
  }
}

尝试修改 pulse 规则，看看动画效果如何 更改。

animation 属性

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 43
• <ph type="x-smartling-placeholder"></ph> 12
• <ph type="x-smartling-placeholder"></ph> 16
• <ph type="x-smartling-placeholder"></ph> 9 个

来源

如需在 CSS 规则中使用 @keyframes，您可以定义各种动画 属性，或使用 animation 简写属性。

animation-duration

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 43
• <ph type="x-smartling-placeholder"></ph> 12
• <ph type="x-smartling-placeholder"></ph> 16
• <ph type="x-smartling-placeholder"></ph> 9 个

来源

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

animation-duration 属性定义 @keyframes 时间轴作为时间值的时间。 该值默认为 0 秒，即动画仍会运行，但也会如此。 时间值不能使用负值。

animation-timing-function

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 43
• <ph type="x-smartling-placeholder"></ph> 12
• <ph type="x-smartling-placeholder"></ph> 16
• <ph type="x-smartling-placeholder"></ph> 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;
}

尝试更改动画的计时函数 使用。

加/减速函数值看起来像是曲线，因为加/减速是使用 贝塞尔曲线，一种用于对速度进行建模的函数。每个时间 函数关键字（例如 ease）会引用预定义的贝塞尔曲线。在 CSS 中 您可以直接使用 cubic-bezier() 函数定义贝塞尔曲线， 接受四个数值：x1、y1、x2、y2。

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

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

<ph type="x-smartling-placeholder">

</ph>

贝塞尔曲线示例。

理解贝塞尔曲线是一项非常复杂的过程。可视化工具，例如： Lea Verou 的 generator非常有帮助。

steps 加/减速函数

有时你可能想对动画进行更精细的控制 而不是沿曲线移动steps() 加/减速函数 您可以将时间轴拆分为多个时长相同的定义间隔。

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

第一个参数是步数。如果有同样数量的 每个关键帧按步骤播放，每个关键帧都会按 其步骤，状态之间没有过渡。 如果关键帧数量少于步数，则浏览器会在 具体取决于第二个参数。

第二个参数是方向。如果设为 end，即表示 默认情况下，步骤会在时间轴末尾完成。如果设为 start， 动画的第一步会在播放开始时立即完成，这意味着 比end提前一步结束。

比较包含步骤和不含步骤的动画。

animation-iteration-count

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 43
• <ph type="x-smartling-placeholder"></ph> 12
• <ph type="x-smartling-placeholder"></ph> 16
• <ph type="x-smartling-placeholder"></ph> 9 个

来源

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

Animation-iteration-count 属性用于定义 @keyframes 时间轴在 动画。该值默认为 1，表示动画在 到达时间轴的终点此值不能为负数。

请尝试更改此动画的迭代次数。

如需制作动画循环播放，请将迭代次数设置为 infinite。就是这样 自本课程开始时的脉动动画起作用了。

脉冲动画会无限循环播放。

animation-direction

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 43
• <ph type="x-smartling-placeholder"></ph> 12
• <ph type="x-smartling-placeholder"></ph> 16
• <ph type="x-smartling-placeholder"></ph> 9 个

来源

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

您可以使用 animation-direction, 采用以下值：

• normal：默认值，即正向。
• reverse：在您的时间轴上向后运行。
• alternate：对于每次动画迭代，时间轴会交替显示 以及反向运行
• alternate-reverse：与 alternate 类似，但动画以 向后运行时间轴

尝试更改动画方向。

animation-delay

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 43
• <ph type="x-smartling-placeholder"></ph> 12
• <ph type="x-smartling-placeholder"></ph> 16
• <ph type="x-smartling-placeholder"></ph> 9 个

来源

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

Animation-delay 属性定义浏览器在开始播放动画前等待的时间。 与 animation-duration 属性一样，这需要一个时间值。

与 animation-duration 不同，您可以将 animation-delay 定义为否定 值，这样可让动画在 时间轴。例如，如果您的动画时长为 10 秒，且您将 animation-delay到-5s，动画会播放到一半 时间轴。

尝试更改动画延迟时间。

animation-play-state

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 43
• <ph type="x-smartling-placeholder"></ph> 12
• <ph type="x-smartling-placeholder"></ph> 16
• <ph type="x-smartling-placeholder"></ph> 9 个

来源

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

Animation-play-state 属性可让您播放和暂停动画。 默认值为 running。如果将其设置为 paused，动画会暂停。

将光标悬停在动画元素上， 暂停动画。

animation-fill-mode

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 43
• <ph type="x-smartling-placeholder"></ph> 12
• <ph type="x-smartling-placeholder"></ph> 16
• <ph type="x-smartling-placeholder"></ph> 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;
  }
}

这不一定是无动画的偏好。它能确保 尤其是不太出人意料的动画。如需详细了解 此偏好和在 Google Analytics 中 动画指南。

试试减少动画的示例。

检查您的理解情况

测试您对动画知识的掌握情况

@keyframes 动画的名称或自定义标识符是否区分大小写？

是

🎉

否

CSS 不允许 2 个动画使用相同名称，但允许 SWOOP 和 swoop 共存。

关键字 from 和 to 等同于：

start和end。

再试一次！

0%和100%。

from 等同于 0%，而 to 等同于 100%。

0和1

再试一次！

animation-timing-function 通常也称为：

动态计时

再试一次！

延迟

再试一次！

Easing

🎉

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

1

浏览器会将元素的当前状态视为关键帧，因此至少需要 1 个关键帧。

2

再试一次！

3

再试一次！

4

再试一次！