great-good-loading-dog

鬼谷設計

GREAT GOOD DESIGN

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

1年前

下面整理基本上會使用到的參數,跟著公式往下跑

文字浮現,圖片移動都不再是夢想

先試著練習一次,再用自己的想法改變

你的網站將不再是一個靜態生硬的網站囉!

CSS動畫係數

animation-name

 

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

animation-name範例 -codepen

animation-duration

 

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

animation-duration範例 -codepen

animation-timing-function

 

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

animation-timing-function範例 -codepen

animation-delay

 

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

animation-delay範例 -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 >

none
不會套用任何動畫樣式
backwards
動畫一開始(包括animation-delay的時間),元素就使用動畫開始時樣式
forwards
動畫結束後,元素套用動畫結束當下時的樣式
both
forwards與backwards結合

animation-fill-mode範例 -codepen