1、animation动画
定义动画Keyframes
语法：@keyframes animationname{keyframes-selector {css-style;}}
animationname ：定义动画的名称
from（与0%相同）
to(与100%相同)
2、animation的播放
1、设置动画的播放方式
播放次数的角度：infinite：无限次播放（不加此属性只播一次）
播放速度角度：animation-timing-function规定动画的速度曲线
语法:animation-timing-function：value;
value:linear 动画从头到尾的速度是相同的
ease:默认。动画以低速开始，然后加快，在结束前变慢
ease-in动画以低速开始
ease-out动画以低速结束
ease-in-out动画以低速开始，低速结束
cubic-bezier(x1,y1,x2,y2) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
2、设置动画开始播放时间、
animation-delay 属性定义动画何时开始。
语法：animation-delay: time;
animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计
语法： animation-duration: time;
3、设置动画播放方向
animation-direction 属性定义是否应该轮流反向播放动画。
语法：animation-direction: normal / alternate;
normal：默认值 动画正常播放
alternate：让动画轮流反向播放
4、动画播放次数
animation-iteration-count ?属性定义动画的播放次数。
语法：animation-iteration-count: n/infinite;
n : 定义动画的播放次数
infinite : 定义动画无限播放
5、动画时间外属性
animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
语法：animation-fill-mode: none|forwards|backwards|both
none :默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards : 在动画结束后（由 animation-iteration-count 决定），动画体被锁定的位置在结束的位置
backwards：在动画结束后（由 animation-iteration-count 决定），动画体被锁定 的位置在开始的位置
