一不小心就寫到Part3...

今天介紹兩個！

animation-delay: 多久以後再開始執行動畫
animation-direction: 動畫的播放方向

animation-delay 可以讓動畫不要一載入網頁後就開始播放，或是讓各個動畫依序開始播放。

以下設定了3s，動畫就會不動3秒之後再開始執行。

要讓它動起來的角色名稱 {
    animation-name: 動畫劇本名稱;
    animation-duration: 3s;
    animation-delay: 3s;
}

以下就可以看出，3秒後才開始動。

animation-direction 指的是從哪裡開始播放影片。

normal ：每次播放都是從頭開始，例如0%到100%
reverse ：每次播放都是從尾開始，例如100%到0%
alternate ：來回播放，0%到100%再從100%到0%，所以播放次數要設定2次以上，才會有來回效果。
alternate-reverse ：來回播放，100%到0%再從0%到100%，所以播放次數要設定2次以上，才會有來回效果。

要讓它動起來的角色名稱 {
    animation-name: 動畫劇本名稱;
    animation-duration: 3s;
    animation-direction: reverse;
}

這樣同一個劇本就能出現不同的效果了！

明天，再來介紹animation-fill-mode: 動畫播放前後的狀態！

下台一鞠躬