//@keyframes定义动画
//animation-name属性主要是用来调用 @keyframes 定义好的动画。
//animation-duration主要用来设置CSS3动画播放时间（其使用方法和transition-duration类似），是用来指定元素播放动画所持续的时间长。
//animation-timing-function属性主要用来设置动画播放方式。（ease、ease-in、ease-out、linear、ease-in-out）
//animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。
//animation-iteration-count属性主要用来定义动画的播放次数。（默认1次，infinite为无限次）
//animation-direction属性主要用来设置动画播放方向。（normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；alternate，动画播放在第偶数次向前播放，第奇数次向反方向播放。）
//animation-play-state属性主要用来控制元素动画的播放状态。其主要有两个值：running和paused。
//animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。
@keyframes redToBlue{
from{
background: red;
}
20%{
background:green;
}
40%{
background:lime;
}
60%{
background:yellow;
}
to{
background:blue;
}
}div {
200px;
height: 200px;
background: red;
margin: 20px auto;
animation-name:redToBlue;
animation-duration: 20s;
animation-timing-function: ease;
animation-delay: 1s;
animation-fill-mode: both;
}