CSS過度動畫效果是使網頁元素在不同狀態下從一個狀態順滑地過渡到另一個狀態的一種方式。在CSS中可以通過加入transition屬性或animation屬性實現。

/* transition屬性 */
.box {
transition: width 1s ease-in-out;
/* 定義過渡的屬性為width，持續時間為1秒，緩動函數為ease-in-out */
}
.box:hover {
width: 200px;
/* 鼠標懸停時觸發過渡，寬度變為200px */
}
/* animation屬性 */
.box {
animation: move 2s ease-in-out;
/* 定義動畫名稱為move，持續時間為2秒，緩動函數為ease-in-out */
}
@keyframes move {
0% {
transform: translateX(0);
/* 定義動畫開始時的transform值 */
}
100% {
transform: translateX(200px);
/* 定義動畫結束時的transform值 */
}
}

transition和animation的區別在于：transition是過渡效果，即在樣式從一種狀態變化到另一種狀態時發生，只有兩個狀態，而animation則是動畫效果，即元素在一段時間內完成多個狀態的變化，可以定義多個關鍵幀。

使用過度動畫效果能夠增加網站的交互性和流動感，提升用戶的體驗，但是應該謹慎使用，避免過度使用導致頁面過于花哨繁瑣。