在昨天介紹了初步的CSS3 Animations之後，今天要來進階的屬性。

昨天的範例中，動畫都只會跑一次就結束。
如果想要動畫多撥放幾次的話該怎麼辦呢？

在角色的CSS中寫上 animation-iteration-count 屬性。
例如以下寫了3，這樣動畫就會重複播放3次。

要讓它動起來的角色名稱 {
    animation-name: 動畫劇本名稱;
    animation-duration: 動畫劇本執行時間，例如3s(3秒);
    animation-iteration-count: 動畫劇本重複次數，例如3(3次);
    width: 100px;
    height: 100px;
    background-color: red;
}

如果要讓動畫不停地播下去，則可以使用 animation-iteration-count: infinite 。

要讓它動起來的角色名稱 {
    animation-name: 動畫劇本名稱;
    animation-duration: 動畫劇本執行時間，例如3s(3秒);
    animation-iteration-count: infinite;
    width: 100px;
    height: 100px;
    background-color: red;
}

動畫執行之後，會發現動畫的每一個階段的速度有快有慢。
想要調整的話，可以使用 animation-timing-function 屬性。

此屬性有幾個值可以填寫。

linear：從頭到尾都是相同速度。
ease：默認值。慢速開始，接著加快，結束前變慢。
ease-in：以慢速作為開始。
ease-out：以慢速作為結束。
ease-in-out：以慢速作為開始和結束。
cubic-bezier(n,n,n,n)：n為0~1的數值。

cubic-bezier這個函數，可以使用這個網站 http://cubic-bezier.com/ 來實際測試你想要的數值是多少。
可以減少自己測試的時間，很方便使用。

以下可看出他們的不同。

添加上這些屬性，動畫就可以增添不同的變化跟感覺。
這時你會發現，這些動畫屬性需要寫好多行來處理。
以上這些屬性，都可以縮減成一個。

要讓它動起來的角色名稱 {
    animation: 動畫劇本名稱  動畫速度  動畫執行時間  動畫執行次數;
}

例如：

要讓它動起來的角色名稱 {
    animation: animation1 linear  5s  1;
}

這樣就可以讓CSS看起來比較簡潔了！

以上是今天的部分，其他明天繼續XDDDD