1）定义动画
@keyframes name {
0%|from{
css样式
}
百分比{
}
100%|to{
css样式
}
}
适配浏览器
@-webkits-keyframes name{}
@-moz-keyframes name{}
@-o-keyframes name{}
@-ms-keyframes name{}
2)调用动画
-webkit-animation:name 动画的持续时间（s/ms）动画的速度变化类型
动画的延迟时间（s/ms） 动画的播放次数（number/infinite）
动画播放方向（alternative：偶数次倒着播放） 动画停在最后一帧：（forward）；
animation-play-state:running(默认值)|pause(暂停)
3）动画属性
animation-name:;动画名称 必须
animation-duration:;持续时间 必须
animation-timing-function:;速度变化类型 可选
animation-delay;延迟时间 可选
animation-iteration-count;播放次数 可选
animation-direction：alternative; 播放模仿 可选
animation-fill-mode; forwords动画停在最后一帧 可选