编程指南-CSS案例开发-4-CSS高级特效-5：CSS动画

作者：棒棒堂智能运维发布时间：2024-09-19

4.5 CSS动画

动画是由一系列静态的图像（帧）以一定的速度（如每秒24帧或每秒30帧）连续播放而形成的。当这些帧快速连续地切换时，会因为视觉残像而产生错觉，将这一系列的静态图像看作是连续运动的画面。CSS动画就是使元素逐渐从一种样式变为另一种样式。可以随意更改任意数量的 CSS 属性以平滑、流畅的方式移动、旋转、缩放、改变透明度等。想要使用 CSS 动画，必须先为动画指定关键帧。关键帧包含元素在特定时间所拥有的样式。相比传统的脚本实现动画技术，使用 CSS 动画有三个主要优点：

① 能够非常容易地创建简单动画，甚至不需要了解 JavaScript 就能创建动画。

② 动画在低性能的系统上也能运行流畅。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用 JavaScript 实现的动画通常表现不佳。

③ 让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。

4.5.1 CSS动画基础

要创建 CSS3 动画，需要了解 @keyframes 规则。通过 @keyframes，可以定义动画序列的关键帧（keyframes），关键帧描述了动画在不同时间点的样式。动画本身是由一系列关键帧组成的，每个关键帧指定了动画中元素在某个时间点的状态。使用@keyframes创建动画“animationName”，“animationName” 是给动画定义的名称，这个名字在应用动画到元素时引用。from 和 to（或 0% 和 100%）关键字用于定义动画的起始和结束状态。你也可以使用百分比来定义动画过程中的任意多个中间状态。示例如下：

4.5.2 CSS动画属性

使用 @keyframes 定义的动画需要通过 CSS 的 animation 属性或其子属性（如 animation-name、animation-duration、animation-timing-function 等）来应用到具体的元素上。以下是属性使用的详细示例：

（1）@keyframes 规则

在 @keyframes 规则中指定CSS样式。将动画绑定到<div>元素上。

① 使用关键字 "from" 和 "to"（代表 0％（开始）和 100％（完成）），设置样式何时改变。定义"example" 动画后绑定到 <div> 元素。动画将持续 4 秒钟，同时将 <div> 元素的背景颜色从 "red" 逐渐改为 "yellow"，具体示例如下：

② 使用百分比值，如在动画完成 25％，完成 50％以及动画完成 100％时更改背景颜色和 <div> 元素的位置。具体示例如下：

（2）延迟动画

animation-delay 属性规定动画开始的延迟时间。如设置在开始动画前有 2 秒的延迟，示例如下：

延迟时间可设置负值。如果使用负值，则动画将开始播放，如同已播放 N 秒。如下示例为已经播放2秒，示例如下：

（3）设置动画应运行多少次

animation-iteration-count 属性指定动画应运行的次数。设置在停止前把动画运行 3 次，示例如下：

使用值 "infinite" 动画将永远持续。示例如下：

（4）反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。animation-direction 属性可接受以下值：

normal（默认值）：动画正常播放（向前）。
reverse：动画以反方向播放（向后）。
alternate：动画先向前播放，然后向后。
alternate-reverse：动画先向后播放，然后向前。

示例如下：

（5）指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。animation-timing-function 属性可接受以下值：

ease（默认值）：指定从慢速开始，然后加快，然后缓慢结束的动画。
linear：规定从开始到结束的速度相同的动画。
ease-in：规定慢速开始的动画。
ease-out：规定慢速结束的动画。
ease-in-out：指定开始和结束较慢的动画。
cubic-bezier(n,n,n,n)：运行您在三次贝塞尔函数中自定义的值。

示例如下：

（6）指定动画的填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode属性在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode属性规定目标元素的样式。animation-fill-mode属性可接受以下值：

none：默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards：元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
backwards：元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both：动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

示例如下：

（7）动画播放控制

animation-play-state 属性规定动画正在运行还是暂停。在JavaScript中使用该属性，就可以控制在播放过程中暂停动画。animation-play-state 属性接受以下参数