一、@keyframes属性
创建动画
@keyframes 动画的名称 { from {开始样式} to {结束样式} }
时间可以用from，to，也可以用百分比规定
二、animation 属性
animation是个简写后的属性，其中包括六个动画属性，分别是：
animation-name 动画绑定的名字，与@keyframes一起使用
animation-duration 动画所用时间，使用s表示
animation-timing-function 规定动画的速度曲线
linear 匀速
ease 默认的速度，先慢中快后慢
ease-in 从慢到快
ease-out 从快到慢
ease-in-out 从慢到比较慢到慢
animation-delay 规定动画开始前的延迟，用s表示
animation-iteration-count 规定播放次数可写数字。或者无限infinite
animation-direction 规定播放是否反向
三、animation-play-state 属性
规定动画是否播放
animation-play-state:running;
//running为播放
animation-play-state:paused;
//paused为暂停
四、animation-fill-mode 属性
规定播放完之后的样子
none 不改变样子
forwards 变成播放完后的样子
backwards 变成一开始也就是百分之零的样子
both 向前和向后填充模式都被应用。