CSS動畫

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)

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 看了很多視頻、文章,最后卻通通忘記了,別人的知識依舊是別人的,自己卻什么都沒獲得。此系列文章旨在加深自己的印象,因...
    DCbryant閱讀 1,969評論 0 4
  • css3動畫 過渡:transition 2D 轉換 transform 3D 轉換 transform 動畫:a...
    劉松陽閱讀 839評論 0 0
  • 本文并非原創(chuàng),屬于摘抄性質,并有個人的加工。 一、過渡動畫 過渡(transition)動畫,就是從初始狀態(tài)過渡到...
    前端xiyoki閱讀 11,816評論 1 13
  • 當我們看到設計精美的科技巨頭網(wǎng)站(如Apple或微軟)或特斯拉或梅賽德斯等汽車公司時,我們每個人都會感到震驚。 使...
    開心人開發(fā)世界閱讀 952評論 0 3
  • 資深的程序員有豐富的項目經(jīng)驗。但是大多數(shù)人沒有注意到的是,新手程序員也有自身很強的優(yōu)勢,新手所具有的優(yōu)勢是有充足的...
    九日照林閱讀 748評論 2 0

友情鏈接更多精彩內(nèi)容