CSS3 animation

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

首先目前opera跟ie都還不支援，webkit跟ff也還需要加-webkit跟-moz去辨識，要稍微注意一下。

view plaincopy to clipboardprint?

1. @keyframes myfirst{   
2.     from {background: red;}   
3.     to {background: yellow;}   
4. }  

動畫就是要keyframe，有玩過flash或ae應該就知道這個東西，上面的是只指定開始跟結束時的狀態，而如果要指定更多關鍵影格，則用百分比表示。

view plaincopy to clipboardprint?

1. @keyframes myfirst{   
2.     0% {background: red;}   
3.     50%{background: yellow;}   
4.     100%  {background: blue;}   
5. }  

@keyframe是類似一般程式裡面的function，寫好keyframe上的動作後，就要去呼叫他的function，使用animation去呼叫。

view plaincopy to clipboardprint?

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