css动画 @keyframes和animation

例：

 @keyframes规则：

        让元素匀速移动，支持from to和百分比，例：

​​​​​​​

 animation规则：

        简写属性，绑定元素。例：

nimation 属性是一个简写属性，用于设置六个动画属性：

• animation-name  规定需要绑定到选择器的 keyframe 名称。
• animation-duration  规定完成动画所花费的时间，以秒或毫秒计。
• animation-timing-function 规定动画的速度曲线。
• animation-delay 规定在动画开始之前的延迟。
• animation-iteration-count 规定动画应该播放的次数。
• animation-direction  规定是否应该轮流反向播放动画。
   

1、animation-name 属性为 @keyframes 动画规定名称。

2、animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。

3、animation-timing-function 规定动画的速度曲线。（6个明细值）

        linear: 动画从头到尾的速度是相同的

        ease：默认。动画以低速开始，然后加快，在结束前变慢

        ease-in：动画以低速开始

        ease-out：动画以低速结束

        ease-in-out：动画以低速开始和结束

        cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

4、animation-delay 属性定义动画何时开始，值以秒或毫秒计，加单位（s/ms）

5、animation-iteration-count 属性定义动画的播放次数。（n:次数/infinite：无数次播放）。

6、animation-direction 属性定义是否应该轮流反向播放动画。

        normal:默认值。动画应该正常播放。

        alternate:画应该轮流反向播放。动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。