CSS的漸變動畫效果，可以為網頁注入更多的動態感，使頁面具有更強的視覺效果。 在這里將介紹如何使用CSS編寫漸變動畫。

.gradient {
background: linear-gradient(to right, #00f260, #0575e6);
animation: gradient 5s ease infinite;
-webkit-animation: gradient 5s ease infinite;
}
@keyframes gradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
@-webkit-keyframes gradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}

上面的代碼將使用linear-gradient設置漸變顏色，使用animation屬性設置動畫效果及時間, 并通過@keyframes定義多個階段的不同樣式，再通過animation屬性綁定。

其中animation屬性可以為多個屬性賦值，從而可以達到更加豐富的效果。比如以下代碼將在2s內生成一個無限循環的心跳效果：

.heart {
position: relative;
width: 100px;
height: 100px;
margin: 50px auto;
background: radial-gradient(circle, #f00 30%, #fff 30%);
animation: heartbeat 2s infinite;
-webkit-animation: heartbeat 2s infinite;
}
@keyframes heartbeat {
0% {transform: scale(1);}
50% {transform: scale(1.15);}
100% {transform: scale(1);}
}
@-webkit-keyframes heartbeat{
0% {transform: scale(1);}
50% {transform: scale(1.15);}
100% {transform: scale(1);}
}

通過使用radial-gradient，將可以制作類似于心跳的效果。這個效果是通過將背景顏色設置為圓形漸變，通過不斷收縮和擴展的樣式來實現的。在動畫樣式中，使用transform屬性的scale進行無限循環的變換。

通過以上代碼，你將可以學會如何使用CSS編寫漸變動畫。繼續深入理解CSS的使用，你將可以創造出更多獨特的動態效果！