動畫 animation

CSS3動畫相關屬性

屬性 屬性質 說明
@keyframes 0% { } 100% { } / from { } to { } 關鍵影格宣告
animation

Name 動畫名稱
duration 持續時間
delay 動畫延遲
iteration-count 播放次數
direction 播放方式
timing-function 速度曲線(加減速)

動畫速寫方式
播放多個動畫使用逗號區隔
animation-name keyframeName / none 動畫名稱
animation-duration s 動畫花費時間(秒計算)
animation-delay s 動畫延遲時間(秒計算)
animation-iteration-count infinite 持續撥放/ number 動畫播放次數
animation-direction normal 單回 / alternate 來回 動畫播放方向
使用alternate ,播放次數最少要2次以上
animation-timing-function

Linear 等速
ease 慢快慢
ease-in 加速
ease-out 減速
ease-in-out 慢快慢
cubic-bezier(n,n,n,n) 自訂曲線

動畫間減速
自訂曲線cubic-bezier.com
animation-play-state paused 暫停/ running 執行 動畫播放狀態
animation-fill-mode X 預設
Backwards
forwards
both
動畫播放狀態屬性
動畫時間轉換為百分比計算方式:花費時間 / 總時間 * 100 = 百分比