動畫 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 = 百分比**