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

animation 属性包含了多个子属性(sub-properties)，name和duration为必要值，另外还有其他项目可以依照需求进行设定：

animation-name (必要值)
这边就是呼唤animation好夥伴@keyframes的地方! 把keyframes後面的自订名字放在这里即可使用，若有多个keyframes要设定在同一个网页元件中，使用逗点隔开即可。

animation-duration (必要值)
动画的灵魂「时间」设定的地方，以时间作为单位，常用秒s或毫秒ms。

animation-timing-function
定义变化的速率，预设值为linear(平均速率变化)，另外可以使用step、cubic-bezier和定义好的ease/ease-in/ease-out/ease-in-out。
step是个有趣的数值，可以让播放产生断点，一步骤一步骤进行播放；如果希望动态是以较顺畅的方式，可以以以定义好的ease/ease-in/ease-out/ease-in-out来进行设定，这些数值会比linear更加柔和，速度感也更加流畅。若希望有更客制化的数值来进行操作，可以利用cubic-bezier，建立自己的贝兹曲线去控制动画的速率变化。

animation-delay
这边也是与时间相关，设定网页元件读取完毕後与动画开始的间隔时间，可以产生延後开始的效果。单位使用秒s或毫秒ms即可。

animation-iteration-count
设定动画的重复次数，使用「infinite」即可达成重复播放。

animation-direction
定义动画播放完毕後是否需反向播放。共有normal、reverse、alternate、alternate-reverse四个值可以设定。normal是顺向播放，reverse则是反向，而alternate第一次是以顺向的方式播放，第二次则以反向，alternate-reverse则相反。
可以发现若要设定alternate或alternate-reverse，需要与上方的iteration-count搭配使用，定义一次以上的播放次数，这里的设定才会产生「第二次与第一次为不同方向播放」的效果。

animation-fill-mode
定义元素在动画播放外(开始前及结束後)的状态。共有none、forwards、backwards、both四个值可以设定。
预设值为none，也就是说在开始之前与播放结束後的状态没有特别设定，会依照动画之外的css相关设定作呈现。而forwards是停留在keyframes最後to/100%的状态，backwards则在最一开始from/0%的状态；而both就会是在开始前以最一开始0%状态为主、结束後就以结束100%状态呈现。

animation-play-state
控制动画的播放状态。有 pause 和 running 两个值，预设为running。较常使用於播放控制元件中。

最後复习一下，一起写在 animation 长这样子：

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

备注：name 和 duration 为必要值。