animation的属性值

animation是CSS里面的一个属性，可以让元素实现动画的效果

animation和transtiond的区别：

 相同点：都是随着时间而改变元素的属性，从而达到动画的效果。
 不同点：transition需要触发一个事件(hover事件或click事件等)，才会随着时间改变其css属性；
 是一种初始效果到 最终效果之间的变化。
 animation不需要触发事件也可以改变元素的属性，达到动画效果；css3的animation需要明确的动画属性值，
                 初始效果———动画帧———动画帧————最终的效果

1、animation-nome： 检索或设置对象所应用的动画名称,必须与规则@keyframes配合使用，
定义关键帧：@keyframes mymove{ } animation-name:mymove;
如下图：

from/0%是初始状态的属性，to/100%是结束状态的属性

2、animation-duration: 检索或设置对象动画的持续时间 （s,ms）
例：animation-duration:3s; 动画完成使用的时间为3s

3、animation-delay： 检索或设置对象动画延迟的时间（s,ms）
例：animation-delay:0.5s; 动画开始前延迟的时间为0.5s

4、 animation-timing-function： 检索或设置对象动画的过渡类型
属性值：
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)
step-start:马上跳到动画每一结束桢的状态 (实现逐帧动画效果)

5、animation-iteration-count：检索或设置对象动画的循环次数

animation-iteration-count：infinite / number;
infinite: 无限循环
number： 循环的次数 （默认是1次，可写数值）

animation 复合式写法：
animation：move（名字）3s（动画持续的时间）2s（开始前的延迟时间）linear（过渡类型）infinite（循环次数）；

使用复合式写法的时候持续时间和延迟时间不能颠倒，前面是持续时间，后面是延迟时间。

一个动画效果必须要有animation-nome（名字属性）和animation-duration（动画持续时间）。