學習CSS3動畫（animation）-html教學-PHP中文網

　　CSS3就是出了不少高大上的功能，3D效果、動畫、多列等等。今天寫篇文章記錄怎麼一下怎麼用CSS3寫一個動畫。

醜話還得說前頭，IE9以及以下版本不支援CSS3動畫（如真要實現可以考慮用js，不過估計效果也不太好）。 chrome和safafi建議加上前綴-webkit-以向前兼容舊版本。

　今天簡單的做一個動畫。

首先，先簡單畫出一個div,然後再添上背景圖片。

<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="demo"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是demo
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

登入後複製

<span style="color: #800000;">.demo</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 100px auto</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> url(img/demo.jpg) no-repeat</span>;
}

登入後複製

一個普通的DIV就出來了如右:

接著我們讓它動起來

先寫一個方法，這個方法描述這個圖片該如何運動

<span style="color: #800000;">@keyframes run_animation</span>{      <span style="color: #ff0000;">
    from {
        transform</span>:<span style="color: #0000ff;"> rotatez(0deg)</span>;
    }<span style="color: #800000;">
    to </span>{<span style="color: #ff0000;">
        transform</span>:<span style="color: #0000ff;"> rotatez(360deg)</span>;
    }<span style="color: #800000;">
}</span>

登入後複製

這個animation_run就是這個方法的名字。等下需要把名字關聯到相關的元素裡。

from是描述動畫的起始狀態，to是動畫的結束狀態。

所以這個方法就是讓一個元素順時針方向轉動360度，非常簡單。

from to往往無法滿足我們日常開發所需，所以還有這種寫法

@keyframes run_animation{
    0%{<br />　　　　 transform:rotatex(0deg);<br />　　 }
    16%{
        transform: rotatey(-90deg);
    }
    33%{
        transform: rotatey(-90deg) rotatez(135deg);
    }
    50%{
        transform: rotatey(225deg) rotatez(135deg);
    }
    66%{
        transform: rotatey(135deg) rotatex(135deg);
    }
    83%{
        transform: rotatex(135deg);
    }<br />　　100%{<br />　　　　 transform: rotatex(0deg);<br />　　}
}

登入後複製

這種描述讓動畫可以有更豐富酷炫的動作。透過百分比來描述每個階段該元素的動態,0%就是上面說的from，100%就是to。其實這個也很簡單吧~

動畫就這麼容易的寫好了。接下來我們把動畫關聯到我們的圖片上。

<span style="color: #800000;">.demo</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 100px auto</span>;<span style="color: #ff0000;">
    animation</span>:<span style="color: #0000ff;"> run_animation 12s linear infinite</span>; /*关联动画名称，定义动画时长，动画播放速度曲线，播放次数*/<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> url(img/demo.jpg) no-repeat 100%</span>;
}

登入後複製

就是這麼簡單一句程式碼，圖片就能照我們定義的方法動起來了。

要是你現在發現動畫沒有動，那可能是下面的原因之一：

1.動畫名稱與@keyframes定義的名稱不符；

2.沒有定義動畫播放時長，預設是0S，即不播放動畫。上述代碼定義12S；

3.在IE9及以下瀏覽器執行程式碼，IE9及以下不支援CSS3 animation；

4.動畫方法定義不對，方法定義的每個階段中樣式都是一樣的。像下面這樣

<span style="color: #800000;">@keyframes run_animation</span>{<span style="color: #ff0000;">
    0%{
        transform</span>:<span style="color: #0000ff;"> rotatez(90deg)</span>;
    }<span style="color: #800000;">
    50%</span>{<span style="color: #ff0000;">
        transform</span>:<span style="color: #0000ff;"> rotatez(90deg)</span>;
    }<span style="color: #800000;">
   100%</span>{<span style="color: #ff0000;">
        transform</span>:<span style="color: #0000ff;"> rotatez(90deg)</span>;
    }<span style="color: #800000;">
}</span>

登入後複製

好了，這時候動畫應該是動起來了。接著說動畫中別的選項：

1.animation-iteration-count: 動畫播放次數，想播放幾次就寫幾。我這裡用了無限次就是infinite

2.animation-timing-function:動畫速度曲線。這個速度曲線有點複雜，涉及到一個貝塞爾函數。不想深入探索貝塞爾就直接用現成的linear、ease、ease-in、ease-out、ease-in-out。要是你懂貝塞爾，可以用cubic-bezier(n,n,n,n)，這個比較高大上，我覺得是裝逼界的利器。

3.animation-delay:動畫可以延時播放，參數也是n S。和animation-duration不一樣，animation-duration是動畫播放時間。

上面幾個屬性都可以簡寫到animation中，就像我上面的栗子一樣。

還有逆向播放、暫停這些屬性就不說了，有需要可以去看http://www.w3school.com.cn/css3/css3_animation.asp或

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

如果還有什麼疑問或建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知 ending~