CSS3中Animation屬性的用法介紹

這篇文章主要介紹“CSS3中Animation屬性的用法介紹”，在日常操作中，相信很多人在CSS3中Animation屬性的用法介紹問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS3中Animation屬性的用法介紹”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

在開始介紹Animation之前我們有必要先來了解一個(gè)特殊的東西，那就是”Keyframes”,我們把他叫做“關(guān)鍵幀”，玩過flash的朋友可能對(duì)這個(gè)東西并不會(huì)陌生。下面我們就一起來看看這個(gè)“Keyframes”是什么東西。前面我們?cè)谑褂胻ransition制作一個(gè)簡(jiǎn)單的transition效果時(shí)，我們包括了初始屬性和最終屬性，一個(gè)開始執(zhí)行動(dòng)作時(shí)間和一個(gè)延續(xù)動(dòng)作時(shí)間以及動(dòng)作的變換速率，其實(shí)這些值都是一個(gè)中間值，如果我們要控制的更細(xì)一些，比如說我要第一個(gè)時(shí)間段執(zhí)行什么動(dòng)作，第二個(gè)時(shí)間段執(zhí)行什么動(dòng)作（換到flash中說，就是第一幀我要執(zhí)行什么動(dòng)作，第二幀我要執(zhí)行什么動(dòng)作），這樣我們用Transition就很難實(shí)現(xiàn)了，此時(shí)我們也需要這樣的一個(gè)“關(guān)鍵幀”來控制。那么CSS3的Animation就是由“keyframes”這個(gè)屬性來實(shí)現(xiàn)這樣的效果。下面我們一起先來看看Keyframes:

Keyframes具有其自己的語法規(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á)到一種在不斷變化的效果，比如說移動(dòng)，改變?cè)仡伾?，位置，大小，形狀等，不過有一點(diǎn)需要注意的是，我們可以使用“fromt”“to”來代表一個(gè)動(dòng)畫是從哪開始，到哪結(jié)束，也就是說這個(gè) “from”就相當(dāng)于”0%”而”to”相當(dāng)于”100%”,值得一說的是，其中”0%”不能像別的屬性取值一樣把百分比符號(hào)省略，我們?cè)谶@里必須加上百分符號(hào)（“%”）如果沒有加上的話，我們這個(gè)keyframes是無效的，不起任何作用。因?yàn)閗eyframes的單位只接受百分比值。

Keyframes可以指定任何順序排列來決定Animation動(dòng)畫變化的關(guān)鍵位置。其具體語法規(guī)則如下：

CSS Code復(fù)制內(nèi)容到剪貼板

1. keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';   

2.  keyframes-blocks: [ keyframe-selectors block ]* ;   

3.  keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;  

把上面的語法綜合起來

CSS Code復(fù)制內(nèi)容到剪貼板

1. @keyframes IDENT {   

2.      from {   

3.        Properties:Properties value;   

4.      }   

5.      Percentage {   

6.        Properties:Properties value;   

7.      }   

8.      to {   

9.        Properties:Properties value;   

10.      }   

11.    }  

   或者全部寫成百分比的形式：

CSS Code復(fù)制內(nèi)容到剪貼板

1. @keyframes IDENT {   

2.    0% {   

3.       Properties:Properties value;   

4.    }   

5.    Percentage {   

6.       Properties:Properties value;   

7.    }   

8.    100% {   

9.       Properties:Properties value;   

10.    }   

11.  }  

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

我們來看一個(gè)實(shí)例:

CSS Code復(fù)制內(nèi)容到剪貼板

1. @-webkit-keyframes 'test' {   

2.      0% {   

3.         margin-left: 100px;   

4.         background: green;   

5.      }   

6.      40% {   

7.         margin-left: 150px;   

8.         background: orange;   

9.      }   

10.      60% {   

11.         margin-left: 75px;   

12.         background: blue;   

13.      }   

14.      100% {   

15.         margin-left: 100px;   

16.         background: red;   

17.      }   

18.   }  

這里我們定義了一個(gè)叫“test”的動(dòng)畫，他的動(dòng)畫是從0%開始到100%時(shí)結(jié)束，從中還經(jīng)歷了一個(gè)40%和60%兩個(gè)過程，上面代碼具體意思是：test動(dòng)畫在0%時(shí)元素定位到left為100px的位置背景色為green，然后40%時(shí)元素過渡到left為150px的位置并且背景色為orange，60%時(shí)元素過渡到left為75px的位置,背景色為blue，最后100%結(jié)束動(dòng)畫的位置元素又回到起點(diǎn)left為100px處,背景色變成red。假設(shè)置我們只給這個(gè)動(dòng)畫有10s的執(zhí)行時(shí)間，那么他每一段執(zhí)行的狀態(tài)如下圖所示：

Keyframes定義好了以后，我們需要怎么去調(diào)用剛才定義好的動(dòng)畫“test”

CSS3的animation類似于transition屬性，他們都是隨著時(shí)間改變?cè)氐膶傩灾?。他們主要區(qū)別是transition需要觸發(fā)一個(gè)事件(hover事件或click事件等)才會(huì)隨時(shí)間改變其css屬性；而animation在不需要觸發(fā)任何事件的情況下也可以顯式的隨著時(shí)間變化來改變?cè)豤ss的屬性值，從而達(dá)到一種動(dòng)畫的效果。這樣我們就可以直接在一個(gè)元素中調(diào)用animation的動(dòng)畫屬性,基于這一點(diǎn)，css3的animation就需要明確的動(dòng)畫屬性值，這也就是回到我們上面所說的，我們需要keyframes來定義不同時(shí)間的css屬性值,達(dá)到元素在不同時(shí)間段變化的效果。

下面我們來看看怎么給一個(gè)元素調(diào)用animation屬性

CSS Code復(fù)制內(nèi)容到剪貼板

1. .demo1 {   

2.      width: 50px;   

3.      height: 50px;   

4.      margin-left: 100px;   

5.      background: blue;   

6.      -webkit-animation-name:'wobble';/*動(dòng)畫屬性名，也就是我們前面keyframes定義的動(dòng)畫名*/  

7.      -webkit-animation-duration: 10s;/*動(dòng)畫持續(xù)時(shí)間*/  

8.      -webkit-animation-timing-function: ease-in-out; /*動(dòng)畫頻率，和transition-timing-function是一樣的*/  

9.      -webkit-animation-delay: 2s;/*動(dòng)畫延遲時(shí)間*/  

10.      -webkit-animation-iteration-count: 10;/*定義循環(huán)資料，infinite為無限次*/  

11.      -webkit-animation-direction: alternate;/*定義動(dòng)畫方式*/  

12.   }  

CSS Animation動(dòng)畫效果將會(huì)影響元素相對(duì)應(yīng)的css值，在整個(gè)動(dòng)畫過程中，元素的變化屬性值完全是由animation來控制，動(dòng)畫后面的會(huì)覆蓋前面的屬性值。如上面例子：因?yàn)槲覀冞@個(gè)demo只是在不同的時(shí)間段改變了demo1的背景色和左邊距，其默認(rèn)值是：margin-left:100px;background: blue；但當(dāng)我們?cè)趫?zhí)行動(dòng)畫0%時(shí)，margin-left:100px,background:green；當(dāng)執(zhí)行到40%時(shí)，屬性變成了：margin-left:150px;background:orange;當(dāng)執(zhí)行到60%時(shí)margin-left:75px;background:blue;當(dāng)動(dòng)畫 執(zhí)行到100%時(shí)：margin-left:100px;background: red;此時(shí)動(dòng)畫將完成，那么margin-left和background兩個(gè)屬性值將是以100%時(shí)的為主,他不會(huì)產(chǎn)生疊加效果，只是一次一次覆蓋前一次出將的css屬性。就如我們平時(shí)的css一樣，最后出現(xiàn)的權(quán)根是最大的。當(dāng)動(dòng)畫結(jié)束后，樣式回到默認(rèn)效果。

到此，關(guān)于“CSS3中Animation屬性的用法介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！