CSS動畫漸變是網頁設計中非常常見的一部分。它可以使網站更加生動有趣，通常用于圖標、按鈕、背景等等。漸變是一種通過顏色過渡實現動畫的方法。本文將介紹如何用CSS創建動畫漸變。

.gradient {
background: linear-gradient(to right, #cc99ff, #66ccff);
/* 從左到右的漸變，起始顏色是#cc99ff，結束顏色是#66ccff */
background-size: 200% 200%;
/* 漸變的面積是原來面積的200% */
animation: gradient 3s ease infinite;
/* 動畫名稱是gradient，速度是ease，重復無限循環 */
}
@keyframes gradient {
0% {
background-position: left;
}
100% {
background-position: right;
}
/* 漸變從左開始到右結束 */
}

在上面的代碼中，我們使用了background屬性來設置漸變的起始和結束顏色。由于動畫是一個漸變的過程，所以我們需要設置background-size來增加漸變的面積。還要為動畫設置動畫名稱、速度和重復次數。最后，我們使用@keyframes關鍵字設置漸變的起始和結束位置。開始位置是左邊，結束位置是右邊，因此動畫會從左往右運行。

除了線性漸變，我們還可以使用徑向漸變。徑向漸變的特點是以某個點為中心，向外擴散。以下是一個例子：

.radial-gradient {
background: radial-gradient(ellipse at center, #cc99ff, #66ccff);
/* 以中心為基準，使用橢圓形的方式進行徑向漸變 */
background-size: 200% 200%;
animation: radial 3s ease infinite;
}
@keyframes radial {
0% {
background-size: 200% 200%;
}
100% {
background-size: 100% 100%;
}
/* 漸變的尺寸由200%縮小到100% */
}

在上面的代碼中，我們使用radial-gradient來創建徑向漸變。我們將橢圓形的中心點設置為居中，然后使用動畫來將漸變面積從原來的200%縮小到100%的過程。

總的來說，創建CSS動畫漸變并不難，我們只需要設置好相關的屬性即可。通過漸變動畫，我們可以讓頁面更加生動有趣，提高用戶的體驗感。