CSS3 Animation動(dòng)畫

要使用CSS3 Animation動(dòng)畫，我們就必須了解keyframes。

keyframes具有自己的規(guī)則，它的命名是由"@keyframes"開頭的。

@keyframes zoomIn{

from{

transform:scale(.1);

}

to{ transform:scale(1); }

}

/*相當(dāng)于0%開始，100%結(jié)束*/

@keyframes zoomIn{

0%{ transform:scale(.1); }

100%{ transform:scale(1); }

}

@keyframes animationName{
0%{}
25%{}
65%{}
100%{}
}

既然是css3的新屬性，多少會(huì)有兼容性的問題。

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規(guī)則和 animation 屬性。

Chrome 和 Safari 需要前綴 -webkit-，也就是@-webkit-keyframes

而Internet Explorer 9，以及更早的版本，不支持 @keyframe 規(guī)則或 animation 屬性。

動(dòng)畫已經(jīng)創(chuàng)建好了，那么如何去使用動(dòng)畫。

這時(shí)，animation就出場了。

它共有8個(gè)屬性：

• animation-name  規(guī)定 @keyframes 動(dòng)畫的名稱。
• animation-duration  規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。
• animation-timing-function  規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"。
• animation-delay  規(guī)定動(dòng)畫何時(shí)開始。默認(rèn)是 0。
• animation-iteration-count  規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1。
• animation-direction  規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。
• animation-fill-mode   規(guī)定動(dòng)畫在播放之前或之后，其動(dòng)畫效果是否可見。
• animation-play-state  規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是 "running"。

1、animation-name

用來定義一個(gè)動(dòng)畫的名稱。

如果要設(shè)置幾個(gè)animation給一個(gè)元素，我們只需要以列表的形式，用逗號(hào)“，”隔開

2.animation-duration

用來指定元素播放動(dòng)畫所持續(xù)的時(shí)間長，單位為秒（s）或毫秒（ms），默認(rèn)值為0

3.animation-timing-function

• linear 規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）。
  
• ease 規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
  
• ease-in 規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
  
• ease-out 規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。
  
• ease-in-out 規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
  

• cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值。

4.animation-delay

用來指定元素動(dòng)畫開始時(shí)間

允許負(fù)值

animation-delay : -2s; //負(fù)值，動(dòng)畫跳過 2 秒進(jìn)入動(dòng)畫周期，也就是從2s的動(dòng)畫開始
-webkit-animation-delay: -2s;

5.animation-iteration-count

用來指定元素播放動(dòng)畫的循環(huán)次數(shù)，其可以取值<number>為數(shù)字，其默認(rèn)值為“1”；infinite為無限次數(shù)循環(huán)。

6.animation-direction

用來指定元素動(dòng)畫播放的方向。

可能值：

• 默認(rèn)值為normal，如果設(shè)置為normal時(shí)，動(dòng)畫的每次循環(huán)都是向前播放；
• reverse 動(dòng)畫反向播放。
  
• alternate，他的作用是，動(dòng)畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。（2016年12月14日更新）
• alternate-reverse 動(dòng)畫在奇數(shù)次（1、3、5...）反向播放，在偶數(shù)次（2、4、6...）正向播放。（2016年12月14日更新）
  

7.animation-fill-mode

檢索或設(shè)置對象動(dòng)畫時(shí)間之外的狀態(tài)

none：

默認(rèn)值。不設(shè)置對象動(dòng)畫之外的狀態(tài)

forwards：

設(shè)置對象狀態(tài)為動(dòng)畫結(jié)束時(shí)的狀態(tài)

backwards：

設(shè)置對象狀態(tài)為動(dòng)畫開始時(shí)的狀態(tài)

both：

設(shè)置對象狀態(tài)為動(dòng)畫結(jié)束或開始的狀態(tài)

8.animation-play-state

用來控制元素動(dòng)畫的播放狀態(tài)。其主要有兩個(gè)值，running和paused。其中running為默認(rèn)值。

可以通過paused將正在播放的動(dòng)畫停下了，也可以通過running將暫停的動(dòng)畫重新播放，我們這里的重新播放不一定是從元素動(dòng)畫的開始播放，而是從你暫停的那個(gè)位置開始播放。另外如果暫時(shí)了動(dòng)畫的播放，元素的樣式將回到最原始設(shè)置狀態(tài)。

綜合使用

animation : name duration timing-function delay iteration-count direction fill-mode play-state

 到這里，我們已經(jīng)知道如何去設(shè)置一個(gè)animation動(dòng)畫，但有些時(shí)候，我們需要在動(dòng)畫開始時(shí)去執(zhí)行一個(gè)指令或者在動(dòng)畫結(jié)束后執(zhí)行一個(gè)指令。

animationstart - CSS 動(dòng)畫開始后觸發(fā) 

animationiteration - CSS 動(dòng)畫重復(fù)播放時(shí)觸發(fā) 

animationend - CSS 動(dòng)畫完成后觸發(fā)

監(jiān)聽動(dòng)畫結(jié)束

/*在jQuery中*/
$(element).on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oAnimationEnd animationend",fn());

/*原生js*/
element.addEventListener("webkitAnimationEnd",fn())  // Chrome, Safari 和 Opera
element.addEventListener("mozAnimationEnd",fn())  //標(biāo)準(zhǔn)寫法