1.css動畫實現(xiàn)的幾種方式
transition
keyframes(animation)
2.過渡動畫和關鍵幀動畫的區(qū)別
過渡動畫需要有狀態(tài)變化
關鍵幀動畫不需要狀態(tài)變化
關鍵幀動畫能控制更精細
3.如何實現(xiàn)逐幀動畫
使用關鍵幀動畫
去掉補間(steps)
4.css動畫的性能
性能不壞 瀏覽器引擎寫好的
部分情況下優(yōu)于js(css優(yōu)化空間不多)
js可以做到更好(可以優(yōu)化的條件下)
部分高危屬性 box-shadow等
animation-direction: reverse;
/*停的時候保持狀態(tài)*/
animation-play-state: paused;
/*決定最后停在哪里*/
animation-fill-mode: forwards;
animation-iteration-count: infinite;
可以指定一個動畫的關鍵路徑 中間的狀態(tài)由css計算完成
相當于多個補間動畫(要求元素有變化)
與補間動畫不同,關鍵幀動畫與元素狀態(tài)的變化無關
定義更加靈活
transform
四大作用:縮放(scale) 位移(translate(XYZ)) 旋轉(rotate(XYZ)) 傾斜 (skew)