CSS動畫係數沒這麼難！讓網頁裡的圖片、文字動起來！

動畫名稱(來自@keyframes)
ex. animation-name: <你的動畫名稱>

animation-name範例 -codepen

動畫持續時間
ex. animation-duration: <持續秒數>

animation-duration範例 -codepen

動畫播放速度
動畫計時函數使用稱為三次貝塞爾曲線的數學函數來製作速度曲線。
您可以在此函數中使用自己的值，或使用預定義值之一。
ex. animation-timing-function: <自定義速度曲線或預定義值的名稱>

animation-timing-function範例 -codepen

動畫延遲
如果設定播放次數大於兩次，只有第一次執行會有延遲
ex. animation-delay: <持續秒數>

animation-delay範例 -codepen

動畫播放次數
填寫播放次數，可以填寫 infinite 讓動畫無限播放
ex. animation-iteration-count: <播放次數或者infinite>

animation-iteration-count範例 -codepen

動畫播放的方向
依參數來判斷動畫播放的方向，預設是由@keyframes的0%到100%
normal是0%~100% | reverse是100%~0% | alternate是0%~100%~0% | alternate-reverse是100%~0%~100%
alternate、alternate-reverse都需要播放次數2次以上
ex. animation-direction: < normal 或 reverse 或 alternate 或 alternate-reverse >

animation-direction範例 -codepen

元素套用動畫開始或結束時的樣式
依參數來判斷動畫在開始或結束時的樣式
ex. animation-fill-mode: < none 或 backwards 或 forwards 或 both >

animation-fill-mode範例 -codepen