正如我们上面提到的，过渡实际上是一种特殊的 CSS 动画：
实际的动画需求要复杂得多，例如我们可能需要：
这时候就需要用到CSS3动画（animation）功能了，它提供了更多的功能。
CSS3 动画就像一个包含演员（HTML 元素）、脚本（关键帧）和动作序列（CSS 规则）的迷你剧。
动画属性
与过渡属性一样，动画是动画属性的一组草图：
示例1：提示信息手动淡出动画
代码很简单，就是设置最后一帧关键帧（下面解释）透明3s。 为了演示，我们将动画的循环模式设置为无限。 实际使用时需要改为forward，即停留在最后的状态。
示例 2：按钮弹跳动画
我们为按钮添加弹跳动画：
<code class="language-css" data-lang="css">@keyframes bouncing{ 0% { bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5);} 100%{ bottom: 50px; box-shadow: 0 50px 50px rgba(0,0,0,0.1);} } .loading-button{ animation: bouncing 0.5s cubic-bezier(0.1,0.25,0.1,1) 0s infinite alternate both;}
加载中
首先，我们选择“actor”作为加载按钮（html元素），然后将其表演脚本（关键帧）设置为弹跳，然后添加一些动作指令（CSS规则）来创建CSS3动画：
@关键帧
在“电影上映”之前css动画循环，我们要创建“脚本”（@keyframes，即关键帧），用于指定动画中间的每一个表演步骤。 @keyframes 由百分比定义（百分比格式的时间坐标）：
我们还可以使用关键字 from 和 to 分别代替 0% 和 100%。
您可以根据需要定义任意数量的关键帧，例如 33%、4% 甚至 29.86%。
每个关键帧都是一个CSS规则，它定义了该时间节点下元素的某个或单个属性。
@keyframes具体句型定义如下：
@keyframes 动画名称 {keyframes-selector {css-styles;}}
@keyframes around {
0% { left: 0; top: 0;}
25% { left: 240px; top: 0;}
50% { left: 240px; top: 240px;}
75% { left: 0; top: 240px;}
100%{ left: 0; top: 0;}
}
p{ animation: around 4s linear infinite;}上面的例子中，将起点0%和终点100%设置为相同的状态，并且无限播放，这样可以保证两个动画之间的无缝衔接。
另外，如果几个时间节点的样式相同，可以组合缩写，例如：
@keyframes around {
0%, 100% { left: 0; top: 0;}
}如果@keyframes中0%和100%时间点设置的属性有默认值，那么在某些情况下可以忽略。
动画名称（animation-name）
动画名称（animation-name）至少会出现两次：
@keyframes scenario{
/* ... */
}
.selector{ animation-name: scenario;}与 CSS 类名一样，动画名称只能包含：
不能以数字或两个破折号开头。
动画持续时间（animation-duration）
与过渡持续时间一样，动画持续时间可以设置为 1s（以秒为单位）或 200ms（以毫秒为单位）。
.selector{ animation-duration: 0.5s;}默认值为0s，即不会出现动画。
动画计时函数
与过渡计时函数一样，动画计时函数可以使用一些预定义的关键字，例如线性、缓出，或使用三次贝塞尔函数来自定义。
.selector{ animation-timing-function: ease-in-out;}默认值是轻松。
我们可以通过设置线性时变函数和自定义@keyframes来模拟复杂的贝塞尔曲线。 Bounce.js就是这样一个在线中级动画生成工具，支持导入CSS样式代码。
动画延迟
与转换延迟一样，动画延迟可以设置为 1s（以秒为单位）或 200ms（以毫秒为单位）。
默认值为0scss动画循环，即不会有延迟。
当触发多个随时间交替的动画序列时，此属性非常有用。
.a,.b,.c{ animation: bouncing 1s;}
.b{ animation-delay: 0.25s;}
.c{ animation-delay: 0.5s;}动画迭代计数（animation-iteration-count）
默认情况下，动画只运行一次（即默认值为1），可以设置3种类型的值：
.selector{ animation-duration: infinite;}动画方向
动画方向定义浏览器读取@keyframes的顺序。
通过下面的循环动画，对比方块的运动轨迹，可以直观地体会到这几个方向的值之间的差异：
正常：0% --> 100%
反向：100% --> 0%
替代：0% 100%
交替反向：100% 0%
动画填充模式（animation-fill-mode）
animation-fill-mode 用于确定动画开始之前和之后的状态。 这就是整个动画过程。
通过关键帧我们定义了动画不同阶段的CSS规则，这可能会与已经定义的样式发生冲突。
fill-mode 属性允许我们告诉浏览器动画样式是否应该在动画之外工作。
让我们想象一下这样的键：
animation-fill-mode 动画开始前 动画开始时 动画结束时 动画结束后
没有任何
默认
开始
结尾
默认
前锋
默认
开始
结尾
结尾
向后
开始
开始
结尾
默认
两个都
开始
开始
结尾
结尾
1. 动画之前 2. 动画期间 3. 动画之后
None：动画样式不会影响默认样式
默认为白色，然后从蓝色变为绿色，回到默认绿色
Forwards：保留动画结束时的样式，直到动画结束后
默认为白色，保持红色从蓝色到绿色
Backwards：动画开始前会预设动画开始时的样式（即覆盖默认样式）
始终为红色从蓝色到绿色回到默认绿色
Both：动画开始前会预设动画开始时的样式，动画结束时的样式会保留到动画结束后
始终为红色 从蓝色变为绿色 保持红色
我们可以简单的理解为：forwards表示动画样式的动作范围向时间轴正方向延伸（->），backwards则向负方向延伸（
