CSS3 動(dòng)畫屬性

1.@keyframes

    如果想要?jiǎng)?chuàng)建動(dòng)畫，那么就必須使規(guī)則。創(chuàng)建動(dòng)畫是通過逐步改變從一個(gè)CSS樣式設(shè)定到另一個(gè)。在動(dòng)畫過程中，可以多次更改CSS樣式的設(shè)走。指定的變化發(fā)生時(shí)使用％,或關(guān)鍵字“from”和“to1’，這是和0%到100%相同的。0%是開頭動(dòng)畫，100%是當(dāng)動(dòng)畫完成。

    為了獲得最佳的瀏覽器支持，應(yīng)該始終定義為0%和100%的選擇器。

2.animation

    所有動(dòng)畫屬性的簡寫屬性，除了animation-play-state屬性外，它們的語法如下：

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

3.animation-name

    animation-name屬性為@keyframes動(dòng)畫規(guī)定名稱，語法如下：

    animation-name: keyframename|none;

    該屬性有兩個(gè)參數(shù)：

    ? keyframename：規(guī)定需要綁定到選擇器的keyframe的名稱。

    ? none：規(guī)定無動(dòng)畫效果（可用于覆蓋來自級(jí)聯(lián)的動(dòng)畫）。

4.animation-duration

    animation-duration屬性定義動(dòng)畫完成一個(gè)周期需要多少時(shí)間，單位是秒或毫秒，語法如下：

    animation-duration: time:

5.animation-timing-function

    animation-timing-function屬性指定動(dòng)畫將如何完成一個(gè)周期。速度曲線定義動(dòng)畫從一套CSS樣式變?yōu)榱硪惶證SS樣式所用的時(shí)間，速度曲線用于使變化更為平滑，語法如下：

    animatiion-tiTning-function: value :

    animation-timingHlinction使用的數(shù)學(xué)函數(shù)稱為三次貝塞爾曲線、速度曲線。使用此函數(shù)時(shí)，可以使用自己的值或預(yù)先定義的值之一。

    animation-timing-function屬性的值可以是以下幾種：

    ?inear：動(dòng)畫從頭到尾的速度是相同的。

    ?ease:默認(rèn)。動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢。

    ?ease-in：動(dòng)畫以低速開始。 o ease-out：動(dòng)畫以低速結(jié)束。 

    ?ease-in-out：動(dòng)畫以低速開始和結(jié)束。

    ?cubic-bezier(n,n,n,n):在cubic-bezie「函數(shù)中使用自己的值。可能的值是0~1的數(shù)值。

6.animation-delay

    animation-delay屬性定義動(dòng)畫什么時(shí)候開始，其值的單位可以是秒（s)或毫秒（ms)。

7.animation-iteration-count

    animation-iteration-count屬性定義動(dòng)畫應(yīng)該播放多少次，默認(rèn)值為1，屬性的值可以使以下 兩種：

    ? n：一個(gè)數(shù)字，定義應(yīng)該播放多少次動(dòng)畫。

    ? infinite：指定動(dòng)畫應(yīng)該播放無限次（永遠(yuǎn)）。

8.animation-direction

    animation-direction屬性定義是否循環(huán)交替反向播放動(dòng)畫，默認(rèn)是normal,語法如下：

    animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit:

    animation-direction屬性的值可以使以下幾種：

    ? normal：默認(rèn)值，動(dòng)畫按正常播放。

    ? reverse:動(dòng)畫反向播放。

    ? alternate：動(dòng)畫在奇數(shù)次（1、3、5……）正向播放，在偶數(shù)次（2、4、6……）反向播放。

    ? alternate-reverse:動(dòng)畫在奇數(shù)次（1、3、5 )反向播放，在偶數(shù)次（2、4、6 )正向播放。

    ? Initial：設(shè)置該屬性為它的默認(rèn)值。

    ? Inherit：從父元素繼承該屬性。

9.animation-play-state

    animation-play-state屬性指定動(dòng)畫是否正在運(yùn)行或已暫停，默認(rèn)是running，語法如下：

    animation-play-state: paused|running;

    animation-play-state屬性的值可以是以下兩種: 

    ? paused：指定暫停動(dòng)畫。

    ? running：指定正在運(yùn)行的動(dòng)畫。