css3動畫animation

關於動畫animation的設置，主要有兩部曲，它們分別是：

1、關鍵幀的設置

關鍵幀的設置，必定要加上各個瀏覽器的前綴名方可以使用。

1.百分比寫法

@keyframes  關鍵幀名{

　　時間的百分比{css設置}

}

2.from、to寫法

@keyframes 關鍵幀名{

　　from{初始的css樣式}

　　to{動畫結束的css樣式}

}

2、給選定的元素綁定關鍵幀

元素{

　　animation:關鍵幀名 動畫時間 延遲執行時間 運行次數 動畫模式 是否交替 動畫結束後停留位置;

}

1）關鍵幀名 animation-name:咱們設置的關鍵幀名

2）動畫時間 animation-duration:單位爲s/ms

3）延遲執行時間 animation-delay:單位爲s/ms

4）運行次數 animation-iteration-count:infinite（無限次）/number;

5）動畫模式 animation-timing-function:ease/linear/ease-in/ease-out/ease-in-out

　　ease 逐漸變慢

　　linear 勻速

　　ease-in 緩慢開始（加速）

　　ease-out 緩慢結束（減速）

　　ease-in-out 先加速後減速

6）是否交替 animation-direction:normal（默認）/reverse（反向）

7）動畫結束後停留位置 animation-fill-mode:none（默認）/forwards/backwards/both

　　none 默認值，不設動畫外的狀態（開始）

　　forwards 停留在結束狀態

　　backwards 停留在開始狀態

　　both 停留在開始或結束狀態（結束）

8）動畫運行/暫停 animation-play-state:running（默認）/paused（暫停）

　　注(ˉ(∞)ˉ) ：在animation的簡寫裏，是不能夠設置該屬性的，因此必須經過該屬性的全寫進行設置。

轉載請註明出處，謝謝噠。。。。。。。