CSS3的動畫

這裡紀錄一下利用CSS做簡單動畫的方法:
在CSS裡，可以利用animation-name屬性來指定動畫，並且利用@keyframes檢設定動畫

下面是一個簡單的例子，設定動畫為一秒，使用myAnim的自訂影格，影格內容分三個時間點(0%，50%和100%)，動畫為左移動：
html:

<div class="animClass">我在移動</div>

css:

.animClass {

      animation-name: myAnim;   

      animation-duration: 1s;     

    

    }



@keyframes myAnim {

  0% {

      padding-left: 100%;

  }

  50% {

      padding-left: 0%;

  }

  100% {

      padding-left: 100%;

  }

}

線上實例演示：
http://jsfiddle.net/rd0zsy78/1/

CSS的動畫使用方法就跟平常使用CSS定義的一樣，用CSS選擇器來為選擇的元素定義動畫，包括了動畫名稱(animation-name)、持續時間(animation-duration)、重覆幾次(animation-iteration-count)等屬性可以設定。

接著就要自已定義對應影片名的關鍵影格，設定不同時間點(用百分比算)的CSS變化。

下面的參考資料就有詳細的各種參數資料可查詢。

參考資料

1. CSS 動畫
2. 使用 CSS Animation 製作網頁上的動畫（隻要 CSS3，不用 JavaScript！）
3. CSS參考手冊