动画

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

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

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

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

什么是关键帧?

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

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

<ph type="x-smartling-placeholder">
</ph> 1 秒时间范围内脉冲器动画的状态
脉冲动画的状态。

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

<ph type="x-smartling-placeholder">
</ph> 与之前相同,但这次包含关键帧
带有关键帧的脉动动画。

@keyframes

浏览器支持

  • Chrome:43。 <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:16. <ph type="x-smartling-placeholder">
  • Safari:9. <ph type="x-smartling-placeholder">

来源

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

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

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

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

在关键帧规则内,fromto 是表示 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 属性

浏览器支持

  • Chrome:43。 <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:16. <ph type="x-smartling-placeholder">
  • Safari:9. <ph type="x-smartling-placeholder">

来源

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

animation-duration

浏览器支持

  • Chrome:43。 <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:16. <ph type="x-smartling-placeholder">
  • Safari:9. <ph type="x-smartling-placeholder">

来源

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

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

animation-timing-function

浏览器支持

  • Chrome:43。 <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:16. <ph type="x-smartling-placeholder">
  • Safari:9. <ph type="x-smartling-placeholder">

来源

为了在动画中重现自然运动,您可以使用计时函数, 计算动画在每个点的速度。计算得出的值通常 弯曲的,让动画在整个播放过程中以可变速度运行 animation-duration,并使元素看似在浏览器发生弹跳时 计算的值超出 @keyframes 中定义的值。

CSS 中有多个关键字作为预设关键字,它们会用作 animation-timing-function: lineareaseease-inease-outease-in-out

.my-element {
    animation-timing-function: ease-in-out;
}
尝试更改动画的计时函数 使用。

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

.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

浏览器支持

  • Chrome:43。 <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:16. <ph type="x-smartling-placeholder">
  • Safari:9. <ph type="x-smartling-placeholder">

来源

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

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

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

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

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

animation-direction

浏览器支持

  • Chrome:43。 <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:16. <ph type="x-smartling-placeholder">
  • Safari:9. <ph type="x-smartling-placeholder">

来源

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

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

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

animation-delay

浏览器支持

  • Chrome:43。 <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:16. <ph type="x-smartling-placeholder">
  • Safari:9. <ph type="x-smartling-placeholder">

来源

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

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

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

尝试更改动画延迟时间。

animation-play-state

浏览器支持

  • Chrome:43。 <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:16. <ph type="x-smartling-placeholder">
  • Safari:9. <ph type="x-smartling-placeholder">

来源

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

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

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

animation-fill-mode

浏览器支持

  • Chrome:43。 <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:16. <ph type="x-smartling-placeholder">
  • Safari:9. <ph type="x-smartling-placeholder">

来源

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 动画的名称或自定义标识符是否区分大小写?

关键字 fromto 等同于:

01
startend
0%100%

animation-timing-function 通常也称为:

延迟
动态计时
Easing

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

1
4
2
3