动画编写及调用

//@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 {
  width: 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;
}