CSS3动画（animation）

  1.什么是动画
     使元素从一种样式逐渐变为另一种样式
     即将多个过渡效果放下一起
     动画是通过"关键帧"，来控制动画的每一步
     关键帧：
       1.定义动画执行的时间点
       2.在该时间点上的样式是什么
  2.动画的使用步骤
    1.声明动画
      为动画起名
      定义关键帧
    2.为元素调用动画
      指定元素调用的动画名称以及各个参数属性
    3.定义动画（声明动画）
      @keyframes 动画名称{
         /*定义该动画中所有的关键帧*/
      0%{
        /*动画开始时元素时的样式*/
     }
     25%{
        /*动画执行到1/4时的样式*/
     }
     50%{
       /*动画执行到一半时的样式*/
     }
     75%{
        /*动画执行到3/4时的样式*/
     }
     100%{
       /*动画执行结束时的样式*/
     }
      }
    4.动画调用（动画属性）
       1.animation-name
        作用：指定调用动画的名称
       2.animation-duration
         作用：指定动画执行一个周期的时长
         取值：以s或ms为单位的数值
      3.animation-timing-function
        作用：指定动画的速度时间曲线函数
        取值：ease,linear,ease-in,ease-out,ease-in-out
      4.animation-delay
          作用：指定动画的延迟时间
          取值：以s或ms为单位的数值
      5.animation-iteration-count
        作用：指定动画的播放次数(默认为1次)
        取值：
         1.具体数字
          2.infinite 无限次数播放
       6.animation-diretion
        作用：指定动画的播放方向
        取值：
         1.normal 
          默认值，正常播放0%-100%
         2.reverse
          逆向播放 100%-0%
         3.alternate
            轮流播放
            奇数次数播放时，正向播放
            偶数次数播放时，逆向播放
      7.动画的简写方式
           animation:name duration timing-function delay iteration-count direction;
      8.animation-fill-mode
          作用：规定动画在播放前或播放后的状态
           取值：
        1.none 默认值
        2.forwards 
           动画播放完成后，将保持在最后一个帧状态
         3.backwards
          动画播放前，延迟时间内，动画保持在第一个帧的状态上
         4.both
          forwards与backwards的合体
     9.animation-paly-state
          作用：指定动画处于播放还是暂停的状态
          取值：
           1.paused 暂停
            2.running 播放