CSS動畫是網頁設計中經常用到的交互效果，它可以提高網站的用戶體驗度并增強頁面的視覺效果。這里我們將介紹三個常用的CSS動畫效果：淡入淡出、位移和旋轉。以下是具體實現方式：

/* 淡入淡出動畫 */
.fade {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.fade:hover {
opacity: 1;
}
/* 位移動畫 */
.translate {
transition: transform 0.5s ease-in-out;
transform: translate3d(0, 0, 0);
}
.translate:hover {
transform: translate3d(10px, 10px, 0);
}
/* 旋轉動畫 */
.rotate {
transition: transform 0.5s ease-in-out;
}
.rotate:hover {
transform: rotate(360deg);
}

以上代碼中，我們使用了CSS的transition過渡屬性，它能夠幫助我們實現CSS動畫效果。對于淡入淡出動畫，我們使用opacity屬性設置元素的透明度，然后通過transition過渡屬性設置動畫時間和緩動函數。當鼠標懸停在元素上時，opacity屬性值變為1，達到淡入效果。

對于位移動畫，我們使用CSS3的transform屬性實現元素的平移和動畫過渡。同樣地，在元素上添加:hover偽類選擇器，當鼠標懸停在元素上時，元素進行平移，路徑為(x,y,z)。

最后，我們介紹了一個簡單的旋轉動畫實現方式。同樣地，我們使用transform的rotate屬性來控制元素的旋轉角度，把元素逆時針旋轉了360度，達到了無限循環的旋轉效果。

總之，利用CSS動畫實現豐富的交互效果對于任何一款網站都是十分重要的，希望以上的例子能給你帶來一些幫助！