我们使用CSS3可以实现动画，主要的方式是通过animation 实现的。
animation属性
- animation-name ：动画的名称
- animation-duration：设置动画时间
- animation-iteration-count：设置动画次数，其中有一个属性infinite为无限循环
- animation-direction：设置动画是否应该反向，默认正常播放，默认值为normal，如果值为'alternate'时动画会在奇数次数正常播放
- animation-delay：设置动画延时，当要用到几个动画的先后顺序时，可以使用
- animation-timing-function： 设置动画结束的时候应用最后一帧的动画，linear线性过渡。ease平滑过渡。ease-in由慢到快。ease-out由快到慢
- animation-fill-mode：none默认值。forwords设置对象状态为动画结束时的状态。backwards设置状态为动画开始时的状态。both设置对象为动画结束或开始时的状态
- animation-play-state：设置动画的暂停与播放，running运动，paused暂停
那么这样说吧，我们不是要用到动画吗？那么动画的使用要在该元素中设置一个animation，而具体的动画操作我们需要用到@keyframes
例：
@keyframes changeColor{
0%{
background:blue;
}
50%{
background: red;
}
100%{
background:yellow;
}
.box{
animation: changeColor 2s infinite;
}
这样的话颜色的变化可能不是很明显，不过这样的话我们可以加上一个属性：
transition: all .8s;
