CSS3 動畫跟互動式動畫不同，互動式動畫需要使用者有執行動作才會反應，

CSS3 動畫是開啟頁面後會直接自動播放，可以應用的範圍很廣，

我們先來看看是怎麼使用的 :

div {

animation: change_color 5s;

}

@keyframes change_color {

from {background: red;}

to {background: yellow;}

}

這個效果是 div 會在網頁讀取完畢後開始執行 change_color ，

change_color 的動作內容為 : 在五秒內背景由紅轉為黃色。

這是很簡單的效果，如果希望再複雜一些，可以參考以下的 code :

@keyframes change_color {

0% {background: red;}

25% {background: yellow;}

50% {background: blue;}

100% {background: green;}

}

以 0 - 100% 百分比來設定動畫影格，

0% 為動畫剛開始，

100% 為動畫結束，

其中要設多少個影格都行。