CSS3 動畫屬性

1.@keyframes

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

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

2.animation

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

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

3.animation-name

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

    animation-name: keyframename|none;

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

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

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

4.animation-duration

    animation-duration屬性定義動畫完成一個周期需要多少時間，單位是秒或毫秒，語法如下：

    animation-duration: time:

5.animation-timing-function

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

    animatiion-tiTning-function: value :

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

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

    ?inear：動畫從頭到尾的速度是相同的。

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

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

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

    ?cubic-bezier(n,n,n,n):在cubic-bezie「函數(shù)中使用自己的值?？赡艿闹凳?~1的數(shù)值。

6.animation-delay

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

7.animation-iteration-count

    animation-iteration-count屬性定義動畫應該播放多少次，默認值為1，屬性的值可以使以下 兩種：

    ? n：一個數(shù)字，定義應該播放多少次動畫。

    ? infinite：指定動畫應該播放無限次（永遠）。

8.animation-direction

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

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

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

    ? normal：默認值，動畫按正常播放。

    ? reverse:動畫反向播放。

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

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

    ? Initial：設置該屬性為它的默認值。

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

9.animation-play-state

    animation-play-state屬性指定動畫是否正在運行或已暫停，默認是running，語法如下：

    animation-play-state: paused|running;

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

    ? paused：指定暫停動畫。

    ? running：指定正在運行的動畫。