CSS3 animation

CSS3開始,也可以用CSS來作動畫了,效能還比javascript好,看了CSS animation的code,感覺真的很有趣阿..

首先目前opera跟ie都還不支援,webkit跟ff也還需要加-webkit跟-moz去辨識,要稍微注意一下。
  1. @keyframes myfirst{   
  2.     from {backgroundred;}   
  3.     to {background: yellow;}   
  4. }  

動畫就是要keyframe,有玩過flash或ae應該就知道這個東西,上面的是只指定開始跟結束時的狀態,而如果要指定更多關鍵影格,則用百分比表示。
  1. @keyframes myfirst{   
  2.     0% {backgroundred;}   
  3.     50%{background: yellow;}   
  4.     100%  {backgroundblue;}   
  5. }  

@keyframe是類似一般程式裡面的function,寫好keyframe上的動作後,就要去呼叫他的function,使用animation去呼叫。
  1. div   
  2. {   
  3.     animation: myfirst 5s;   
  4.     -moz-animation: myfirst 5s; /* Firefox */  
  5.     -webkit-animation: myfirst 5s; /* Safari and Chrome */  
  6. }   
第一個數值是keyframe name,第二個值是動畫持續的時間,這邊就知道為什麼keyframe的時間是用百分比表示了。

除了name跟時間外,在CSS3裡還有更多東西可以設定。
animation-name: 動畫名稱
animation-duration: 動畫時間
animation-timing-function: 動畫移入移出的效果,各效果及說明請看這個
animation-delay: 動畫延遲開始時間,預設是0
animation-iteration-count: 循環次數,如果要無限循環就使用infinite
animation-direction: 動畫結束後是否反向撥放回去,預設為normal,反向播放回去則使用alternate
animation-play-state: 動畫暫停與否,使用running或pause

簡單範例
W3CSchool說明
酷炫CSS3動畫
The Guide To CSS Animation: Principles and Examples
Using CSS3 Transitions, Transforms and Animation

留言

熱門文章