CSS3 animation 動畫屬性

CSS3 animation 動畫屬性是 CSS 用來設計網頁動畫的標準屬性,CSS3 animation 有許多種不同的屬性效果可以設定,用來控制動畫的移動方式、移動方向、顏色變化 ... 等效果,功能非常的強大,CSS3 animation 屬性甚至可以達到傳統需要用 JavaScript 或 Flash 設計的動畫效果,優點是完全不需要 JavaScript 就可以設計出不太複雜的動畫,而且更具有消耗資源的優勢,如果要用 JavaScript 設計出相同效果的動畫,通常需要較為複雜的程式碼,也比較吃資源,CSS3 animation 把動畫生成的工作交給瀏覽器處理,對於動畫優化也有所幫助。

使用 animation 動畫屬性只需要設定好 animation 的屬性以及關鍵影格 keyframes 就可以很輕鬆的讓動畫跑起來,但是各家瀏覽器的支援程度還不一致,所以在 CSS 的語法中,會需要加入特別為瀏覽器所寫的字首(prefix),這個部分在範例中會看到。

基本設定一:CSS3 animation 動畫屬性語法
animation: name duration timing-function delay iteration-count direction;
CSS3 animation 共有六個基本屬性可以使用,分別是 name、duration、timing-function、delay、iteration-count、direction 這六個,用來控制動畫元素的各種動畫效果,一個 animation 就可以把這六個屬性都寫完,也可以分別設計各個屬性的值,這六個屬性效果如表所示。

CSS3 animation 動畫屬性清單
屬性說明
animation-name定義動畫的關鍵影格 @keyframes 名稱。
animation-duration定義動畫執行一次的時間,可以秒或毫秒為單位。
animation-timing-function
定義動畫執行的速度曲線,例如線性 linear 或低速開始。
animation-delay定義動畫準備完成至開始動作的時間,可以秒為單位,若為 0s 表示不延遲。
animation-iteration-count定義動畫重覆執行次數,若要無限次執行可使用 infinite。
animation-direction定義動畫執行完一次是否需要反向執行,若要反向執行可使用 alternate。
基本設定二:@keyframes 關鍵影格的設定

關鍵影格 keyframes 的設定可以說是 CSS3 animation 動畫效果的關鍵,若是缺少了關鍵影格的設定,動畫就跑不起來,要設定關鍵影格有兩個重點,分別是從哪邊開始跑(from)以及跑到哪裡結束(to),關鍵影格是透過 percentage 來判斷動畫啟動的時間點以及結束的時間點,0% 代表的是動畫起點,100% 則代表動畫結束點,使用 from 與 to 來設定,這部分在範例中也都會看到。關鍵影格描述的是動畫建變過程的外觀,也就是說,除了可以利用關鍵影格來控制 animation 動畫的跑動,也可以控制動畫的顏色改變。

CSS3 animation 範例一、讓 DIV 區塊由左移至右
<style type="text/css">
<!--
#D1{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:TestMove 5s infinite; /*IE*/
    -moz-animation:TestMove 5s infinite; /*FireFox*/
    -webkit-animation:TestMove 5s infinite; /*Chrome, Safari*/
}
@keyframes TestMove{
    from {left:0%;}
    to {left:80%;}
}
@-moz-keyframes TestMove{
    from {left:0%;}
    to {left:80%;}
}
@-webkit-keyframes TestMove{
    from {left:0%;}
    to {left:80%;}
}
-->
</style>
<div style="width:700px;border:1px #ccc solid;padding:20px;">
<div id="D1"></div>
</div>
範例效果
範例一呈現了基本的 DIV 區塊移動效果,CSS 語法中先對 D1 區塊設定基本的尺寸、顏色與位置,然後透過 animation 屬性設計出 5 秒重覆執行的動畫效果,關鍵影格設定區塊從左邊 0% 跑到右邊 80% 結束,紅色的 DIV 區塊從左邊開始移動到右邊,接著變回左邊開始重覆跑再一次,整個動畫效果就這樣連續不停的重覆執行著。

範例中的 animation 屬性以及關鍵影格 keyframes 前面都有加上字首(prefix),這樣的功能就是讓不同的瀏覽器能夠支援這個動畫的效果,其中「-moz-」是讓 FireFox 支援、「-webkit-」是要讓 Chrome 與 Safari 支援,都沒有加字首的是給 IE 看的,IE10 開始支援 CSS3  animation 屬性,IE9 以及更早版本的 IE 瀏覽器是不支援 animation 效果的。

CSS3 animation 範例二、讓 DIV 區塊左右來回運動
<style type="text/css">
<!--
#D2{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:TestMove2 5s infinite alternate; /*IE*/
    -moz-animation:TestMove2 5s infinite alternate; /*FireFox*/
    -webkit-animation:TestMove2 5s infinite alternate; /*Chrome, Safari*/
}
@keyframes TestMove2{
    from {left:0%;}
    to {left:80%;}
}
@-moz-keyframes TestMove2{
    from {left:0%;}
    to {left:80%;}
}
@-webkit-keyframes TestMove2{
    from {left:0%;}
    to {left:80%;}
}
-->
</style>
<div style="width:700px;border:1px #ccc solid;padding:20px;">
<div id="D2"></div>
</div>
範例效果
範例一中的紅色 DIV 區塊從左邊開始跑到右邊,又跳回左邊重新開始,這樣感覺並不流暢,如果我們讓紅色 DIV 區塊的動作改成跑到右邊接著反方向跑回左邊,這樣整個動畫就變得更流暢了,範例二的程式碼與範例一大同小異,主要的差別在使用了 animation-direction  的反方向執行效果 alternate,為了讓範例程式碼比較整潔,所以我們同樣直接把 alternate 寫在 animation 屬性裡,修改過後的紅色 DIV 區塊是不是動作變得比較流暢的感覺了呢?第一段提到過 animation 屬性不只是可以製作移動的動畫,也可以製作變色的動畫,請看範例三。

CSS3 animation 範例三、讓 DIV 區塊變顏色
<style type="text/css">
<!--
#D3{
    width:200px;
    height:100px;
    background:red;
    position:relative;
    animation:TestMove3 3s infinite alternate; /*IE*/
    -moz-animation:TestMove3 3s infinite alternate; /*FireFox*/
    -webkit-animation:TestMove3 3s infinite alternate; /*Chrome, Safari*/
}
@keyframes TestMove3{
    from {background-color:red;}
    to {background-color:orange;}
}
@-moz-keyframes TestMove3{
    from {background-color:red;}
    to {background-color:orange;}
}
@-webkit-keyframes TestMove3{
    from {background-color:red;}
    to {background-color:orange;}
}
-->
</style>
<div style="width:700px;border:0px #ccc solid;padding:20px;">
<div id="D3"></div>
</div>
範例效果
在範例三中,我們把 DIV 區塊放大了些,看起來比較清楚,變色的重點在關鍵影格的設定,我們先看 CSS 程式碼中對 D3 區塊的設定,基本的尺寸、顏色與位置都設定好之後,開始動畫 animation 屬性的設定,這次變化時間設定為 3 秒,也是無限次執行,同樣也有反向執行,關於區塊動畫的基本設定完成後,馬上進入變色的重點,關鍵影格 keyframes 的設定,動畫開使是的效果是紅色背景顏色,動畫結束是橘色背景顏色,這樣長方形 DIV 區塊就會在紅色與橘色之間變換。
  • 語法「from {background-color:red;}」設置區塊背景顏色為紅色
  • 語法「from {background-color:orange;}」設置區塊背景顏色為橘色
CSS3 animation 動畫屬性雖然剛開始使用會有點複雜,但是比起用 JavaScript 來設計這些效果,CSS3 animation 動畫屬性還是有比較多的優勢,而且稍微熟悉後,其實也相當的簡單,可以設計出比範例更多豐富的動畫效果。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C