CSS3 animation详细讲解

知识点目录：
1.animation属性的基本用法
2.animation带*名词解释
3.keyframes用法
4.多重动画
5.css的3D动画

1.animation属性的基本用法

只要看一张图就清楚：

看懂这个图中的4个例子即可。
一般只需要填：动画名称、动画形式、持续时间、延迟时间、animation-fill-mode即可
即看懂最后一个例子。

2.下面是带*名词详解：

【动画形式】：animation-timing-function
可选值：
ease 两头慢，中间快
linear 完全匀速
ease-in 开始慢
ease-out 结束的时候
ease-in-out 比ease幅度更大一点
cubic-bezier（num，num，num，num）
大部分情况建议用ease-in-out
cubic-bezier太复杂，大部分时候用不到

【动画方向】：animation-direction
normal是正常，不用解释
reverse反向执行，原本的动画效果倒过来
alternate往返执行，就是一次normal，一次reverse
alternate-reverse相反的往返，即alternate倒过来。

【animation-fill-mode】：
一般就填both
一个动画，假设只执行一次，那么开始的时候是不是第一帧的状态
结束的时候是不是保持最后一帧。下面是取值：
none默认值，即都不保持。
backwards开始的时候保持动画第一帧的状态
forwards结束的时候保持动画最后一帧的状态
both开始的时候保持，结束的时候也保持
如果设置为backwards，那么0%的关键帧会比默认写的css样式优先
forwars同理
通常情况都设置为both

【是否执行】：animation-play-status
就两个值，
running播放动画
paused暂停动画
用:hover来暂停某个动画，是经典用法

3.keyframes用法

示例图

在对应百分比中填入css样式，动画会依次执行这些样式。
-webkit-前缀是浏览器兼容。一般还需要额外写-o-和-moz-

4.关于多重动画

多重动画本质上就是同一个动画属性中，用逗号分隔的两个动画
在不冲突的情况下执行
但是，由于keyframes可以设置的属性很自由，所以不建议写多重动画

5.css的3D动画

似乎用得不多
了解3D动画之前，要先了解css的transition属性。