CSS動畫是現代網頁設計中非常重要的一種技術，它可以讓網頁更加生動、活潑。本文將介紹幾種常用的CSS動畫效果，以及它們的實現方法。

1. 平移動畫

/* CSS代碼 */
#box {
transition: transform 1s ease-in-out;
}
#box:hover {
transform: translateX(100px);
}

這段代碼實現的是鼠標懸停在元素上時，元素會向右平移100像素的動畫效果。其中，transition屬性用于定義動畫過渡效果，transform屬性用于定義元素的變換效果。

2. 縮放動畫

/* CSS代碼 */
#box {
transition: transform 1s ease-in-out;
}
#box:hover {
transform: scale(1.2);
}

這段代碼實現的是鼠標懸停在元素上時，元素會變大1.2倍的動畫效果。同樣地，我們使用transition屬性和transform屬性來定義動畫效果。

3. 旋轉動畫

/* CSS代碼 */
#box {
transition: transform 1s ease-in-out;
}
#box:hover {
transform: rotate(180deg);
}

這段代碼實現的是鼠標懸停在元素上時，元素會向右旋轉180度的動畫效果。還是使用transition屬性和transform屬性來定義動畫效果。

4. 漸變動畫

/* CSS代碼 */
#box {
transition: background-color 1s ease-in-out;
}
#box:hover {
background-color: red;
}

這段代碼實現的是鼠標懸停在元素上時，元素的背景色會從原來的顏色漸變為紅色的動畫效果。transition屬性這次用于定義背景色變化的過渡效果。

總結：以上四種CSS動畫效果都是比較基礎的，但也是網頁設計中最常用的動畫效果。我們只需要使用好transition和transform這兩個CSS屬性，就可以實現生動、豐富的網頁動畫效果。