CSS3動畫的使用以及優化

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