CSS動畫係數沒這麼難！讓網頁裡的圖片、文字動起來！
下面整理基本上會使用到的參數，跟著公式往下跑
文字浮現，圖片移動都不再是夢想
先試著練習一次，再用自己的想法改變
你的網站將不再是一個靜態生硬的網站囉!
animation-duration
animation-timing-function
動畫播放速度
動畫計時函數使用稱為三次貝塞爾曲線的數學函數來製作速度曲線。 您可以在此函數中使用自己的值，或使用預定義值之一。
ex. animation-timing-function: <自定義速度曲線或預定義值的名稱>
animation-timing-function範例 -codepen
animation-iteration-count
動畫播放次數
填寫播放次數，可以填寫 infinite 讓動畫無限播放
ex. animation-iteration-count: <播放次數或者infinite>
animation-iteration-count範例 -codepen
animation-direction
動畫播放的方向
依參數來判斷動畫播放的方向，預設是由@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
animation-fill-mode
元素套用動畫開始或結束時的樣式
依參數來判斷動畫在開始或結束時的樣式
ex. animation-fill-mode: < none 或 backwards 或 forwards 或 both >
不會套用任何動畫樣式
動畫一開始(包括animation-delay的時間),元素就使用動畫開始時樣式
動畫結束後,元素套用動畫結束當下時的樣式
forwards與backwards結合
animation-fill-mode範例 -codepen