动画

1. 作用

使元素从一种样式变为另外一种样式 可以控制过程

2. 定义动画

@keyframes name{
                  0%|from{ }
                  百分比{ }
                  100%|to
}
@-webkit-keyfarmes name{ }
@-o-keyfarmes name{}
@-moz-keyfarmes name{}
@-ms-keyfarmes name{}

3.调用动画

-webkit-animation:;
 animation:name /*必须*/ 持续时间（s/ms）/*必须*/ 速度变化类型 延迟时间 播放次数  +
（number|infinite）  播放方向（alternate:偶数次倒序）动画停在最后一帧（forwards）；

animation:name duration timing-function delay iteration-count direction fill-mode;
                 必须     必须
animation-name:;动画名称
animation-duration:;动画持续时间
animation-timing-function:;动画速度变化类型//linear 匀速   ease//默认值
animation-delay:动画延迟时间
animation-iteration-count:动画播放次数//infinite 无限
animation-direction:; 动画播放方向//normal 默认值   alternute  偶向前，奇向后
animation-fill-mode:;动画停在最后一帧
animation-play-state:running|paused;动画播放状态，一般配合hover使用