CSS3動畫是網頁設計中常見的一種效果，它可以繪制出令人賞心悅目的漸變效果。其中，顏色漸變效果使用的最為廣泛，今天我們就來介紹一下如何使用CSS3動畫實現顏色漸變效果。

/* 定義漸變 */
.gradient{
background: -webkit-linear-gradient(#FFEB3B, #FF5722); /* Safari 5.1-6 */
background: -o-linear-gradient(#FFEB3B, #FF5722); /* Opera 11.1-12.0 */
background: -moz-linear-gradient(#FFEB3B, #FF5722); /* Firefox 3.6-15 */
background: linear-gradient(#FFEB3B, #FF5722); /* 標準語法 */
}
/* 定義動畫 */
.animation{
animation: changeColor 2s;
-webkit-animation: changeColor 2s; /* Safari 和 Chrome */
}
/* 定義動畫關鍵幀 */
@keyframes changeColor{
0%{background: #FFEB3B;}
50%{background: #FF5722;}
100%{background: #FFEB3B;}
}
/* Safari 和 Chrome */
@-webkit-keyframes changeColor{
0%{background: #FFEB3B;}
50%{background: #FF5722;}
100%{background: #FFEB3B;}
}

代碼解析：

首先，我們定義一個包含顏色漸變效果的CSS樣式類.gradient。其中，我們使用了CSS3中的linear-gradient屬性，它可以讓一種顏色平滑地過渡到另一種顏色。在這里，我們使用了黃色和橙色來作為漸變色。這部分代碼適用于不需要動畫的顏色漸變效果。
下面，我們定義一個包含動畫的CSS樣式類.animation。它通過設置animation屬性和關鍵幀@keyframes的方式，來實現背景顏色的動態變化。這里的動畫時間為2秒，關鍵幀設置了三個時間點，分別是0%、50%和100%。在0%和100%的時間點，顏色為黃色；而在50%的時間點，顏色為橙色。這樣，我們就定義了一個背景顏色從黃色到橙色再到黃色的動畫效果。
最后，我們需要在Safari和Chrome中添加@-webkit-keyframes關鍵幀，因為它們需要為不同的瀏覽器提供不同的CSS前綴。