CSS動畫小結

CSS動畫

原理：1.畫面之間變化  2.視覺暫留做用

常見問題

1.CSS 動畫的實現方式有幾種

1.transition  2. keyframes(animation)

2.過渡動畫和關鍵幀動畫的區別

1.過渡動畫須要狀態變化  2.關鍵幀動畫不須要狀態變化 3.關鍵幀動畫能控制更精細

3.如何使用逐幀動畫

1.使用關鍵幀動畫 2.去掉補間動畫（steps）

4.CSS動畫性能

1.和 JS 動畫很難比較出誰更好

2.部分高危屬性（box-shadow）

知識點

動畫類型：

1.transition 補間動畫

能夠計算的屬性有：1.位置-平移（left/right/margin/transform) 2.方向-旋轉（transform)3.大小-縮放（transform）

4.透明度（opacity）5.其餘-線性變換（transform）

示例

在1s 內，寬度有100px 變爲 800px

過渡transition是一個複合屬性，包括transition-property、transition-duration、transition-timing-function、transition-delay這四個子屬性。經過這四個子屬性的配合來完成一個完整的過渡效果

transition-property: 過渡屬性(默認值爲all)
transition-duration: 過渡持續時間(默認值爲0s)
transiton-timing-function: 過渡函數(默認值爲ease函數)
transition-delay: 過渡延遲時間(默認值爲0s)

2.keyframe 關鍵幀動畫（指定一個CSS樣式和動畫將逐步從目前的樣式更改成新的樣式）

至關於多個補間動畫，與元素狀態的變化無關，定義更加靈活

在1s 內，寬度有100px 變爲 800px；無需像補間動畫那樣須要觸發條件（沒有狀態變化），點擊進去動畫就開始

 

使用animation實現逐幀動畫

 

3.逐幀動畫

1.適用於沒法補件計算的動畫  2.每一幀都是關鍵幀，佔用資源較大 3.使用steps

前端實現逐幀動畫，不外乎三種技術（視頻能夠實現全部類型的動畫，暫不歸入）：gif、Javascript、CSS3 Animation。

實現逐幀動畫須要兩個條件：（1）動畫幀；（2）連續播放。

詳細參見CSS3動畫開發指南之逐幀動畫