css3 animation属性和使用方法

css3 animation属性

将动画与元素绑定。
animation需要配合@keyframes使用。可以添加的参数有以下几种：
animation,
animation-name,
animation-duration,
animation-timing-function,
animation-delay,
animation-iteration-count,
animation-direction,
animation-play-state,
animation-fill-mode;

与@keyframes配合使用

参数的使用

animation-name
设置要添加上哪组动画的名称(@keyframes自定义名称);
animation-duration
设置完成该动画需要多长时间;
animation-timing-function

   animation-timing-function: linear;

设置该动画的运动效果;
       linear：匀速过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
　　ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) (默认值)
　　ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
　　ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
　　ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
　　cubic-bezier：特定的贝塞尔曲线类型。
　　step-start:：等同于 steps(1, start)
　　step-end：等同于steps(1, end)
　　steps(第一个参数必须为正数，指定动画会以几步的方式来分割总时长
animation-delay

animation-delay: 3s;

设置延迟时间，延迟多久才执行这个动画;
animation-iteration-count

animation-iteration-count: infinite;

设置该动画要循环多少次播放(如果设置多个属性值，用逗号隔开)
默认只会执行依次。
infinite:无限循环；
animation-direction

 animation-direction: reverse;

设置关键帧容器的播放顺序，也就是，我们一般的关键帧容器，是从0% 开始 到 100%，正常方向播放，使用该属性，可以改变他的方向，例如从 100% 往 0% 播放。
参数：
　　normal：默认值，正常方向
　　reverse：反方向运动。
　　alternate：先从正常的方向运动，然后在从反方向运动，并持续交替运动，(也就是，我们设置的次数，必须超过2)
　　alternate-reverse：跟上面的相反， 先从 反反向运动，然后再从正常方向运动，并持续交替运动
animation-play-state

设置可以暂停，和运动的属性(兼容性还不是很好，在一些场景中会有错误行为 。部分浏览器不支持伪元素动画，或者支持得不够好，尽可能不要利用伪元素来做动画)
参数：
　　running：默认值，运动
　　paused：暂停
animation-fill-mode

 animation-fill-mode: forwards;

设置动画的状态；
参数：
　　none：默认值。没啥效果
　　forwards：关键帧容器的 100% 的状态， 就是该动画结束时的样子。
　　backwards：关键帧容器的 0% 的状态， 就是该动画开始时的样子。
　　both：也就是上面两个的结合体。 开始和结束都有。
animation各个属性简写
animation:name duration timing-function() delay iteration-count direction play-state fill-mode;
从第三个参数开始，后面的参数的位置，都是可以随意调位置的，因为他们并没有相同的属性值，所以可以 随便填，不分位置。