认识 CSS animation 与他的孩子们 (一)

keyframes 定义关键影格的各自状态，不同关键影格组成动态变化，但我们在定义keyframes时，使用的是from / to 或0%~100%之间，少了一个相当重要的元素「时间」，在CSS的世界中，是在要使用的网页元件上时，提供此动态的时间数值。

因此，最单纯的animation的使用方式就是放入好朋友keyframes的名字，和不可或缺的时间：

.my-div{
animation: my-animation 3s;
}

@keyframes my-animation{
  0%{
      opacity:0;
    }
  100%{
      opacity:1;
    }
}

刚刚内容也可以用子属性animation-name和animation-duration改写：

.my-div{
animation-name: my-animation;
animation-duration: 3s;
}

备注：若要同时使用多个定义好的keyframes，使用逗点隔开即可同时使用。

animation属性包含了多个子属性(sub-properties)，除了name和duration外，还有以下项目可以依照需求进行设定：

• animation-timing-function：定义变化的速率，预设值为linear(平均速率变化)，另外可以使用step、cubic-bezier和定义好的ease/ease-in/ease-out/ease-in-out。
• animation-delay：定义网页元件读取完毕後，动画开始的间隔时间，用於产生延迟效果。
• animation-iteration-count：设定动画的重复次数，使用「infinite」即可达成重复播放。
• animation-direction：定义动画播放完毕後是否需反向播放。共有normal、reverse、alternate、alternate-reverse四个值可以设定。
• animation-fill-mode：定义元素在动画播放外的状态。共有none、forwards、backwards、both四个值可以设定。
• animation-play-state：控制动画的播放状态。有 pause 和 running 两个值，预设为running。

除了使用子属性外，也可全部写在 animation 中：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

备注：name 和 duration 为必要值。