在開始介紹Animation之前我們有必要先來(lái)了解一個(gè)特殊的東西，那就是"Keyframes",我們把他叫做“關(guān)鍵幀”，玩過(guò)flash的朋友可能對(duì)這個(gè)東西并不會(huì)陌生。下面我們就一起來(lái)看看這個(gè)“Keyframes”是什么東西。

前面我們?cè)谑褂胻ransition制作一個(gè)簡(jiǎn)單的transition效果時(shí)，我們包括了初始屬性和最終屬性，一個(gè)開始執(zhí)行動(dòng)作時(shí)間和一個(gè)延續(xù)動(dòng)作時(shí)間以及動(dòng)作的變換速率，其實(shí)這些值都是一個(gè)中間值，如果我們要控制的更細(xì)一些，比如說(shuō)我要第一個(gè)時(shí)間段執(zhí)行什么動(dòng)作，第二個(gè)時(shí)間段執(zhí)行什么動(dòng)作（換到flash中說(shuō)，就是第一幀我要執(zhí)行什么動(dòng)作，第二幀我要執(zhí)行什么動(dòng)作），這樣我們用Transition就很難實(shí)現(xiàn)了，此時(shí)我們也需要這樣的一個(gè)“關(guān)鍵幀”來(lái)控制。那么CSS3的Animation就是由“keyframes”這個(gè)屬性來(lái)實(shí)現(xiàn)這樣的效果。

Keyframes具有其自己的語(yǔ)法規(guī)則，他的命名是由"@keyframes"開頭，后面緊接著是這個(gè)“動(dòng)畫的名稱”加上一對(duì)花括號(hào)“{}”，括號(hào)中就是一些不同時(shí)間段樣式規(guī)則，有點(diǎn)像我們css的樣式寫法一樣。對(duì)于一個(gè)"@keyframes"中的樣式規(guī)則是由多個(gè)百分比構(gòu)成的，如“0%”到"100%"之間，我們可以在這個(gè)規(guī)則中創(chuàng)建多個(gè)百分比，我們分別給每一個(gè)百分比中給需要有動(dòng)畫效果的元素加上不同的屬性，從而讓元素達(dá)到一種在不斷變化的效果，比如說(shuō)移動(dòng)，改變?cè)仡伾?#xff0c;位置，大小，形狀等，不過(guò)有一點(diǎn)需要注意的是，我們可以使用“fromt”“to”來(lái)代表一個(gè)動(dòng)畫是從哪開始，到哪結(jié)束，也就是說(shuō)這個(gè) "from"就相當(dāng)于"0%"而"to"相當(dāng)于"100%",值得一說(shuō)的是，其中"0%"不能像別的屬性取值一樣把百分比符號(hào)省略，我們?cè)谶@里必須加上百分符號(hào)（“%”）如果沒有加上的話，我們這個(gè)keyframes是無(wú)效的，不起任何作用。因?yàn)閗eyframes的單位只接受百分比值。

keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';keyframes-blocks: [ keyframe-selectors block ]* ;keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;

上面的語(yǔ)法綜合起來(lái)

@keyframes IDENT {from {Properties:Properties value;}Percentage {Properties:Properties value;}to {Properties:Properties value;}}或者全部寫成百分比的形式：@keyframes IDENT {0% {Properties:Properties value;}Percentage {Properties:Properties value;}100% {Properties:Properties value;}}

其中IDENT是一個(gè)動(dòng)畫名稱，你可以隨便取，當(dāng)然語(yǔ)義化一點(diǎn)更好，Percentage是百分比值，我們可以添加許多個(gè)這樣的百分比，Properties為css的屬性名，比如說(shuō)left,background等，value就是相對(duì)應(yīng)的屬性的屬性值。值得一提的是，我們from和to 分別對(duì)應(yīng)的是0%和100%。這個(gè)我們?cè)谇懊嬉蔡岬竭^(guò)了。到目前為止支技animation動(dòng)畫的只有webkit內(nèi)核的瀏覽器，所以我需要在上面的基礎(chǔ)上加上-webkit前綴。

這里我們定義了一個(gè)叫“wobble”的動(dòng)畫，他的動(dòng)畫是從0%開始到100%時(shí)結(jié)束，從中還經(jīng)歷了一個(gè)40%和60%兩個(gè)過(guò)程，上面代碼具體意思是：wobble動(dòng)畫在0%時(shí)元素定位到left為100px的位置背景色為green，然后40%時(shí)元素過(guò)渡到
left為150px的位置并且背景色為orange，60%時(shí)元素過(guò)渡到left為75px的位置,背景色為blue，最后100%結(jié)束動(dòng)畫的位置元素又回到起點(diǎn)left為100px處,背景色變成red。

一、animation-name:

animation-name:是用來(lái)定義一個(gè)動(dòng)畫的名稱，其主要有兩個(gè)值：IDENT是由Keyframes創(chuàng)建的動(dòng)畫名，換句話說(shuō)此處的IDENT要和Keyframes中的IDENT一致，如果不一致,將不能實(shí)現(xiàn)任何動(dòng)畫效果；none為默認(rèn)值，當(dāng)值為none時(shí)，將沒有任何動(dòng)畫效果。另外我們這個(gè)屬性跟前面所講的transition一樣，我們可以同時(shí)附幾個(gè)animation給一個(gè)元素，我們只需要用逗號(hào)“，”隔開。

二、animation-duration：

animation-duration是用來(lái)指定元素播放動(dòng)畫所持續(xù)的時(shí)間長(zhǎng)，取值:為數(shù)值，單位為s （秒.）其默認(rèn)值為“0”。這個(gè)屬性跟transition中的transition-duration使用方法是一樣的。

三、animation-timing-function:

animation-timing-function:是指元素根據(jù)時(shí)間的推進(jìn)來(lái)改變屬性值的變換速率，說(shuō)得簡(jiǎn)單點(diǎn)就是動(dòng)畫的播放方式。他和transition中的transition-timing-function一樣，具有以下六種變換方式：ease;ease-in;ease-in-out;linear;cubic-bezier。具體的使用方法大家可以點(diǎn)這里，查看其中transition-timing-function的使用方法。

四、animation-delay:

animation-delay:是用來(lái)指定元素動(dòng)畫開始時(shí)間。取值為為數(shù)值，單位為s(秒)，其默認(rèn)值也是0。這個(gè)屬性和transition-delayy使用方法是一樣的。

五、animation-iteration-count

animation-iteration-count是用來(lái)指定元素播放動(dòng)畫的循環(huán)次數(shù)，其可以取值為數(shù)字，其默認(rèn)值為“1”；infinite為無(wú)限次數(shù)循環(huán)。

六、animation-direction

animation-direction是用來(lái)指定元素動(dòng)畫播放的方向，其只有兩個(gè)值，默認(rèn)值為normal，如果設(shè)置為normal時(shí)，動(dòng)畫的每次循環(huán)都是向前播放；另一個(gè)值是alternate，他的作用是，動(dòng)畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。

七、animation-play-state

animation-play-state主要是用來(lái)控制元素動(dòng)畫的播放狀態(tài)。其主要有兩個(gè)值，running和paused其中running為默認(rèn)值。他們的作用就類似于我們的音樂(lè)播放器一樣，可以通過(guò)paused將正在播放的動(dòng)畫停下了，也可以通過(guò)running將暫停的動(dòng)畫重新播放，我們這里的重新播放不一定是從元素動(dòng)畫的開始播放，而是從你暫停的那個(gè)位置開始播放。另外如果暫時(shí)了動(dòng)畫的播放，元素的樣式將回到最原始設(shè)置狀態(tài)。這個(gè)屬性目前很少內(nèi)核支持，所以只是稍微提一下。

參考網(wǎng)址A

轉(zhuǎn)載于:https://www.cnblogs.com/mcat/p/4845587.html

總結(jié)

以上是生活随笔為你收集整理的CSS-3 Animation 的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。