CSS3動畫的使用以及優化
- 2020 年 4 月 2 日
- 筆記
CSS3 動畫
目錄
1. 定義動畫
2. animation 屬性
3. animation 屬性的兼容
4. animation與transition 屬性的取別
5. animate.css 動畫庫
6. 動畫的調試及優化
定義動畫
為了實現動畫所以必須準備一個動畫劇本:
1 /* 當動畫只用兩個關鍵幀時可以使用該方式定義關鍵幀 */ 2 @keyframes mymove{ 3 from { 4 /* 初始狀態屬性 */ 5 } 6 to { 7 /* 結束狀態屬性 */ 8 } 9 } 10 11 /* 當動畫有多個關鍵幀可以使用該方式定義關鍵幀 */ 12 @keyframes mymove { 13 0%{ 14 /* 初始狀態屬性 */ 15 } 16 /* 可以添加多個動畫幀 */ 17 100%{ 18 /* 結束狀態屬性 */ 19 } 20 } 21 /* （中間再可以添加關鍵幀）*/
animation 屬性
1. animation-name 檢索或設置對象所應用的動畫名稱
1 @keyframes mymove{ 2 /* ... */ 3 } 4 5 animation-name:mymove;
說明：必須與規則@keyframes配合使用，如果要設置幾個animation給一個元素，我們只需用逗號隔開
2. animation-duration 檢索或設置對象動畫的持續時間
animation-duration: 3s;
說明：animation-duration:3s; 動畫完成使用的時間為3s
默認值為 0
3. animation-delay 檢索或設置對象動畫延遲的時間
animation-delay:0.5s
說明：animation-delay:0.5s; 動畫開始前延遲的時間為0.5s
默認值為 0
4. animation-iteration-count 檢索或設置對象動畫的循環次數
animation-iteration-count: infinite | number;
取值說明：
- infinite：無限循環
- number: 循環的次數
- 默認值為 1
5. animation-direction 檢索或設置對象動畫在循環中是否反向運動
animation-direction: reverse;
取值說明：
- normal：正常方向
- reverse：反方向運行
- alternate：動畫先正常運行再反方向運行，並持續交替運行
- alternate-reverse：動畫先反運行再正方向運行，並持續交替運行
- 默認值為 normal
6. animation-play-state 檢索或設置對象動畫的狀態
animation-play-state: paused;
取值說明：
- running:運動
- paused: 暫停
- animation-play-state:paused; 當滑鼠經過時動畫停止，滑鼠移開動畫繼續執行
- 默認值 running:運動
7. animation-fill-mode: forwards;屬性規定動畫在播放之前或之後，其動畫效果是否可見。
animation-fill-mode: forwards;
取值說明：
- none :默認值，不做任何改變
- forwards 停留在最後一個步驟
- backwards 使用元素的起始值。
- both 動畫將遵循forwards和backwards的規則，從而在兩個方向上擴展動畫屬性。
8. animation-timing-function 檢索或設置對象動畫的過渡類型
animation-timing-function: linear;
取值說明：
- linear： 線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
- ease： 平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
- ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)
- ease-out： 由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)
- ease-in-out： 由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
- cubic-bezier(n,n,n,n) 在立方貝塞爾函數中定義速度函數。 可能的值是從0到1的數字值, 測試網站 https://cubic-bezier.com
- step-start: 馬上跳到動畫每一結束楨的狀態
- steps() 函數用於把整個操作領域切分為相同大小的間隔，每個間隔都是相等的。
- 語法：steps(number[, end | start])
- number參數指定了時間函數中的間隔數量（必須是正整數）
- 第二個參數是可選的，可設值：start和end，表示在每個間隔的起點或是終點發生階躍變化，如果忽略，默認是end。
- 默認值為 ease
9. animation複合屬性。檢索或設置對象所應用的動畫特效。
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
屬性值說明：
- name -> 表示動畫的名稱
- duration -> 動畫時間
- timing-function -> 動畫速度曲線
- delay -> 動畫的延遲
- iteration-count -> 動畫的播放次數
- direction -> 是否應該輪流反向播放動畫
- fill-mode -> 動畫播放之前與播放之後的狀態
- play-state -> 動畫的播放與暫停
注意：複合屬性的某些屬性可以省略。
animation兼容性及兼容性前綴
-webkit-animation: ; -moz-animation: ; -o-animation: ; animation: ; @-webkit-keyframes move{ } @-moz-keyframes move{ } @-o-keyframes move{ } @keyframes move{ }
瀏覽器的支援情況
animation和transition的區別
相同點：都是隨著時間改變元素的屬性值。
不同點：
1. transition需要觸發一個事件(hover事件或click事件等)才會隨時間改變其css屬性；
而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果，css3的animation就需要明確的動畫屬性值。
2. 過度屬性無法實現複雜的效果
3. 過渡屬性一次滑鼠經過只可以發生一次，不能重複發生動畫
4. 動畫是需要配合@keyframes來使用
5. 過度屬性無法中間暫停
animate.css 動畫庫
CSS3動畫庫演示地址
https://daneden.github.io/animate.css/
animate.css 的下載地址
https://raw.githubusercontent.com/daneden/animate.css/master/animate.css
animate.css 的使用
1. 引入animate.css
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css">
2. 給動畫元素添加類名
<div class="animated rubberBand"></div>
動畫的調試及優化
Google瀏覽器的控制台中查看animations面板
f12 打開控制台 –> 選擇控制台中最右邊的三個點 –> 選擇More tools –> 選擇 Animations –> 在控制台的下方將會顯示animations控制面板
Google瀏覽器rendering面板
f12 打開控制台 –> 選擇控制台中最右邊的三個點 –> 選擇More tools –> 選擇 rendering –> 下方將會顯示rendering 面板
性能優化：https://www.jianshu.com/p/eaf4cfc07eac
