关于动画animation的设置，主要有两部曲，它们分别是：
一、关键帧的设置
关键帧的设置，一定要加上各个浏览器的前缀名方可使用。
1.百分比写法
@keyframes 关键帧名{
时间的百分比{css设置}
}
2.from、to写法
@keyframes 关键帧名{
from{初始的css样式}
to{动画结束的css样式}
}
二、给选定的元素绑定关键帧
元素{
animation:关键帧名 动画时间 延迟执行时间 运行次数 动画模式 是否交替 动画结束后停留位置;
}
1）关键帧名 animation-name:我们设置的关键帧名
2）动画时间 animation-duration:单位为s/ms
3）延迟执行时间 animation-delay:单位为s/ms
4）运行次数 animation-iteration-count:infinite（无限次）/number;
5）动画模式 animation-timing-function:ease/linear/ease-in/ease-out/ease-in-out
ease 逐渐变慢
linear 匀速
ease-in 缓慢开始（加速）
ease-out 缓慢结束（减速）
ease-in-out 先加速后减速
6）是否交替 animation-direction:normal（默认）/reverse（反向）
7）动画结束后停留位置 animation-fill-mode:none（默认）/forwards/backwards/both
none 默认值，不设动画外的状态（开始）
forwards 停留在结束状态
backwards 停留在开始状态
both 停留在开始或结束状态（结束）
8）动画运行/暂停 animation-play-state:running（默认）/paused（暂停）
注(ˉ(∞)ˉ) ：在animation的简写里，是不可以设置该属性的，所以必须通过该属性的全写进行设置。
转载请注明出处，谢谢哒。。。。。。。