Transition_Transform_Animation

transition動畫

語法 說明
transition-propety 設置過渡的屬性
transition-duration 設置過渡的時間
transition-timing-function 設置過渡的運動方式
transition-delay 設置動畫的延遲
transition:property duration timing-function delay 同時設置四種屬性

格式為:在哪產生動畫、動畫的時間、運動曲線、延遲

過渡的運動方式包含以下幾種:

  • linear 勻速
  • ease 開始和結束慢速
  • ease-in 開始時慢速
  • ease-out 結束時慢速
  • ease-in-out 開始和結束時慢速(相當于ease)
  • cubic-bezier(n,n,n,n)

比如:cubic-bezier(-0.845,-0.375,0.215,1.335)

transform 變換

語法 說明
translate(x,y) 設置盒子位移
scale(x,y) 設置盒子縮放
rotate(deg) 設置盒子旋轉
skew(x-angle,y-angle) 設置盒子斜切
perspective 設置透視距離
transform-style flat:preserve-3d 設置盒子是否按3d空間顯示
translateX、translateY、translateZ 設置三維移動
rotateX、rotateY、rotateZ 設置三維旋轉
scaleX、scaleY、scaleZ 設置三維縮放
tranform-origin 設置變形的中心點
backface-visibility 設置盒子背面是否可見

animation動畫

1、@keyframes 定義關鍵幀動畫
2、animation-name 動畫名稱
3、animation-duration 動畫時間
4、animation-timing-function 動畫曲線

linear 勻速
ease 開始和結束慢速
ease-in 開始是慢速
ease-out 結束時慢速
ease-in-out 開始和結束時慢速
steps 動畫步數

5、animation-delay 動畫延遲
6、animation-iteration-count 動畫播放次數 n|infinite
7、animation-direction

normal 默認動畫結束不返回
Alternate 動畫結束后返回

8、animation-play-state 動畫狀態

paused 停止
running 運動

9、animation-fill-mode 動畫前后的狀態

none 不改變默認行為
forwards 當動畫完成后,保持最后一個屬性值(在最后一個關鍵幀中定義)
backwards 在 animation-delay 所指定的一段時間內,在動畫顯示之前,應用開始屬性值(在第一個關鍵幀中定義)
both 向前和向后填充模式都被應用

10、animation:name duration timing-function delay iteration-count direction;同時設置多個屬性

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容