CSS3開始，也可以用CSS來作動畫了，效能還比javascript好，看了CSS animation的code，感覺真的很有趣阿..
首先目前opera跟ie都還不支援，webkit跟ff也還需要加-webkit跟-moz去辨識，要稍微注意一下。
動畫就是要keyframe，有玩過flash或ae應該就知道這個東西，上面的是只指定開始跟結束時的狀態，而如果要指定更多關鍵影格，則用百分比表示。
@keyframe是類似一般程式裡面的function，寫好keyframe上的動作後，就要去呼叫他的function，使用animation去呼叫。
第一個數值是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
首先目前opera跟ie都還不支援，webkit跟ff也還需要加-webkit跟-moz去辨識，要稍微注意一下。
- @keyframes myfirst{
- from {background: red;}
- to {background: yellow;}
- }
動畫就是要keyframe，有玩過flash或ae應該就知道這個東西，上面的是只指定開始跟結束時的狀態，而如果要指定更多關鍵影格，則用百分比表示。
- @keyframes myfirst{
- 0% {background: red;}
- 50%{background: yellow;}
- 100% {background: blue;}
- }
@keyframe是類似一般程式裡面的function，寫好keyframe上的動作後，就要去呼叫他的function，使用animation去呼叫。
- div
- {
- animation: myfirst 5s;
- -moz-animation: myfirst 5s; /* Firefox */
- -webkit-animation: myfirst 5s; /* Safari and Chrome */
- }
除了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
留言