CSS是網頁設計中的重要一環，它能為網頁添加許多動畫效果實現更豐富的交互體驗。

一個簡單的例子就是懸停效果的實現。在CSS中，針對元素的偽類選擇器:hover 可以讓元素在被鼠標懸停時改變樣式。比如下面這個例子，當鼠標懸停在按鈕上時，按鈕會變成灰色:

button:hover{
background-color: gray;
color: white;
}

除了:hover外，CSS還提供其它許多的動畫效果，比如：

1. 過渡效果（transition）：讓元素在改變某個屬性時帶有動畫過渡效果。

/*當鼠標懸停時，按鈕的顏色漸變到藍色，用時0.5s, 緩動函數為ease-in-out*/
button{
transition: background-color 0.5s ease-in-out;
}
button:hover{
background-color: blue;
}

2. 動畫效果（animation）：通過改變元素的關鍵幀實現自定義的動畫效果。

/*讓一個方塊在2秒內向右移動200px并做一個360度的旋轉*/
.box{
animation: moveAndRotate 2s;
}
@keyframes moveAndRotate{
0%{
transform: translateX(0) rotate(0);
}
50%{
transform: translateX(200px) rotate(180deg);
}
100%{
transform: translateX(200px) rotate(360deg);
}
}

CSS交互動畫的效果豐富多樣，可以根據需求實現各種效果，大大提升了網頁的交互體驗。