2015年10月11日 星期日

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參考手冊

沒有留言 :

張貼留言