CSS彩色動畫是現在網頁設計中非常常見的一種效果，它可以使網頁的展示更加生動、豐富，讓用戶的體驗更加舒適。下面我們來看一個簡單的CSS彩色動畫案例。

.box {
width: 100px;
height: 100px;
background-color: #bada55; /* 設置初始顏色 */
animation: animate 2s ease-in-out infinite; /* 設置動畫，無限循環 */
}
@keyframes animate {
0% {
background-color: #bada55;
}
50% {
background-color: #92c83e;
}
100% {
background-color: #bada55;
}
}

在上面的代碼中，我們先定義了一個class為“box”的div，設置了它的寬高和初始背景顏色為#bada55。然后我們通過CSS3的@keyframes規則定義了一個名為“animate”的動畫，其中0%、50%和100%表示動畫的三個階段，分別對應不同的背景顏色。最后我們將這個動畫應用到.box類上，使得div可以不斷循環著這三種顏色的變化。

通過使用CSS彩色動畫，我們可以讓網頁效果更加豐富、生動。相信在不久的將來，更多的網頁設計會采用這種效果來提升用戶體驗。