动画是突出显示互动元素并增加兴趣的好方法 让设计充满乐趣在本单元中,您将了解如何 添加动画效果
有时,您会在界面上看到一些小帮助程序, 有关您点击时所在部分的信息。这些通常具有 闪烁的动画,巧妙地告诉你信息已经存在 应该与之互动 本单元将介绍如何使用 CSS。
您可以使用 CSS 设置带有关键帧的动画序列。这些序列 可以是基本的单状态动画,也可以是复杂的、基于时间的序列。
什么是关键帧?
在大多数动画工具中,关键帧是用于分配动画的机制 将状态映射到时间轴上的时间戳。
例如,以下是闪烁的“helper”的时间轴点。动画运行 时长为 1 秒并具有 2 种状态。
<ph type="x-smartling-placeholder">每种动画状态都有开始和结束的特定时间点。 您可以使用关键帧在时间轴上映射这些元素。
<ph type="x-smartling-placeholder">@keyframes
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
属性
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
如需在 CSS 规则中使用 @keyframes
,您可以定义各种动画
属性,或使用 animation
简写属性。
animation-duration
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.my-element {
animation-duration: 10s;
}
animation-duration
属性定义 @keyframes
时间轴作为时间值的时间。
该值默认为 0 秒,即动画仍会运行,但也会如此。
时间值不能使用负值。
animation-timing-function
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
为了在动画中重现自然运动,您可以使用计时函数,
计算动画在每个点的速度。计算得出的值通常
弯曲的,让动画在整个播放过程中以可变速度运行
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">理解贝塞尔曲线是一项非常复杂的过程。可视化工具,例如: 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 type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.my-element {
animation-iteration-count: 10;
}
Animation-iteration-count
属性用于定义 @keyframes
时间轴在
动画。该值默认为 1,表示动画在
到达时间轴的终点此值不能为负数。
如需制作动画循环播放,请将迭代次数设置为 infinite
。就是这样
自本课程开始时的脉动动画起作用了。
animation-direction
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.my-element {
animation-direction: reverse;
}
您可以使用 animation-direction, 采用以下值:
normal
:默认值,即正向。reverse
:在您的时间轴上向后运行。alternate
:对于每次动画迭代,时间轴会交替显示 以及反向运行alternate-reverse
:与alternate
类似,但动画以 向后运行时间轴
animation-delay
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.my-element:hover {
animation-play-state: paused;
}
Animation-play-state
属性可让您播放和暂停动画。
默认值为 running
。如果将其设置为 paused
,动画会暂停。
animation-fill-mode
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
animation-fill-mode
属性用于定义 @keyframes
时间轴中的哪些值在
动画开始播放后或结束播放后播放。默认值为 none
,
动画完成时,时间轴中的值将被舍弃。
其他选项包括:
forwards
:根据动画方向,最后一个关键帧依然存在。backwards
:第一个关键帧根据动画方向持续存在。both
:第一个和最后一个关键帧都会保留。
animation
简写形式
您不必单独定义每个属性,而是可以在
animation
简写形式,可让您定义
以下顺序:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
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
动画的名称或自定义标识符是否区分大小写?
关键字 from
和 to
等同于:
0%
和100%
。0
和1
start
和end
。animation-timing-function
通常也称为:
@keyframes
动画中至少需要多少个关键帧?