#CSS:製作動畫效果-使用keyframe與animation

之前在網站上搞了一個Logo用的CSS3動畫,
然後現在這個部落格的標題也用了CSS3動畫,
故現在想來好好地整理一下跟CSS3動畫相關的功能,
底下就開始說明該如何建立CSS3動畫。

使用@keyframes建立動畫內容

首先先在CSS檔內建立@keyframes去制定動畫的內容,
其Syntax在下方:

keyframes.css

@keyframes 動畫名稱 {
    關鍵影格選擇器1 { 眾多css樣式; }
    關鍵影格選擇器2 { 眾多css樣式; }
  ...
}

概念類似Flash當中的關鍵影格,
在動畫內建立各個位置的時候,其css樣式為何,
到最後就交由瀏覽器去做補間效果。

關鍵影格選擇器的部分可使用:
1. 0-100% : 在時間的幾%時為何種css樣式,範例如下。

percent-selector.css

@keyframes myAnimation
{
    0% { margin-top: 0px; background-color: yellow;}
  50% { margin-top: 50px; background-color: red; }
  100% { margin-top: 100px; background-color: blue; }
}

2.from、to : 其實意思與0%和100%一樣,範例如下:

from-to-selector.css

@keyframes myAnimationFromTo
{
  from { margin-top: 20px; color: yellow; }
  to { margin-top: 80px; color: blue; }
}

建立好@keyframes動畫內容後,
接著就要在欲放置該動畫的CSS樣式表內加入animation屬性。

Animation屬性

Animation屬性的Syntax於下:

animation.css

animation: name duration timing-function delay iteration-count direction;

或者依照上面每一項的名稱皆可分開寫:

animation-split.css

animation-name: 動畫名稱;
animation-duration: 動畫作用時間;
animation-timing-function: 動畫補間時運用的計算公式;
animation-delay: 動畫需間隔多久後才開始;
animation-iteration-count: 動畫作用次數;
animation-direction: 動畫作用的方向;

animation-name指的就是上面定義的@keyframes的名稱,找到你想用的@keyframes的名稱,填上去即可。

接著可以從animation-duration去指定其動畫時間,這也是為什麼上面定義@keyframes不是使用時間,
而是使用%,這可以讓同一個動畫重複使用,並且不一定要執行相同的時間。

timing-function有linear、ease、ease-in、ease-out、ease-in-out可以用,
或者可用cubic-bezier(n,n,n,n)來自己制定(0 <= n <= 1)。

至於iteration-count如果要無限多次可用infinite。

最後動畫作用的方向指的是動作作用的時候可以是@keyframes相反的方向(to->from、100%->0%)(reverse),
或是作用完後又回頭(alternate)、或是先相反再變正常順序(alternate-reverse)。

底下用個範例去使用上面定義的myAnimation動畫:

div-animation.css

div{
  width: 100px;
  height: 100px;
  animation: myAnimation 3s ease 0s infinite alternate;
}

CSSAnimationExample.gif

大體上製作一個CSS Animation就是這樣的一個流程,
你也可以搭配CSS3的transform屬性去作出更多移動、翻轉、放大縮小的效果,
甚至是3D翻轉喔!!

如果不想自己coding出動畫,想藉助一些工具來做動畫,
可以參考使用CSS 3.0 Maker唷!

-webkit-前綴字

由於目前通用性的寫法在Chrome上還是不能用,
請在CSS多複製一份@keyframes動畫與animation屬性,
並在前面加上-webkit-前綴字,
如下列範例所示:

webkit.css

@keyframes myAnimation
{
    0% { margin-top: 0px; background-color: yellow;}
  50% { margin-top: 50px; background-color: red; }
  100% { margin-top: 100px; background-color: blue; }
}

@-webkit-keyframes myAnimation
{
    0% { margin-top: 0px; background-color: yellow;}
  50% { margin-top: 50px; background-color: red; }
  100% { margin-top: 100px; background-color: blue; }
}

div{
  width: 100px;
  height: 100px;
  animation: myAnimation 3s ease 0s infinite alternate;
  -webkit-animation: myAnimation 3s ease 0s infinite alternate;
}

參考資料

1.w3schools.com > CSS3 @keyframes Rule:http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
2.w3schools.com > CSS3 animation Property:http://www.w3schools.com/cssref/css3_pr_animation.asp
3.池水間 - 你需要知道的CSS3動畫技術 ::: 睡蓮‧池水間 - waterlily-lsl.com:http://waterlily-lsl.com/modules/article/view.article.php/c2/232/p2
4.CSS 3.0 Maker:http://css3maker.com/

Per informazioni più dettagliate sulle ottimizzazioni basate su compilatore, vedere il nostro Avviso sull'ottimizzazione.