css animation

animation(动画)属性是 

animation-name， 默认值: none 用@keyframe设置的动画的名字 

animation-duration(持续时间), 0s, 

 animation-timing-function(动画运行速度)，ease 

animation-delay(动画延迟)，0s 

animation-iteration-count(动画迭代次数)，1 可选: infinite/<number> 

animation-direction(方向)，normal ,alternate,reverse,alternate-reverse 

animation-fill-mode(动画填充模式),none  

animation-play-state(动画播放状态) running /paused (停止) 

属性的一个简写属性形式。

 animation 属性用来指定一组或多组动画，每组之间用逗号相隔。 

animation timing-function(运行速度)的属性值: 

默认属性ease（低速开始，加快，低速结束） linear（匀速运动） ease-in（低速开始） ease-out（低速 结束 ） ease-in-out 低速开始和结束 steps（n）动画分成n步来完成 

 animation-iteration-count的属性值: 

1.infinite 无限循环 

2.<number> 默认值1.可以为小数,不可为负值 

 animation-direction(方向)的属性值: 

1.normal(默认值) 每个动画循环结束，动画重置到起点重新开始 

2.alternate 动画交替反向运行，反向运行时，动画按步后退,带时间功能的函数也反向 

3.reverse 反向运行动画，每周期结束动画由尾到头运行。 

4.alternate-reverse 动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。

 animation-fill-mode(填充模式)的属性值:none | forwards | backwards | both 

1.none默认值 

2.forwards 目标将保留由执行期间遇到的最后一个关键帧计算值。 最后一个关键帧取决于animation-direction和animation-iteration-count的值

 3.backwards 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。 

4.both 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

 示例: 赛隆人之眼 

<div class="view_port">
  <div class="polling_message">
    Listening for dispatches
  </div>
  <div class="cylon_eye"></div>
</div>
.polling_message {
  color: white;
  float: left;
  margin-right: 2%;            
}
.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}
.cylon_eye {
  background-color: red;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(0, 0, 0, .9) 75%);
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}
@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }