在現代網站設計中，添加動畫效果是非常常見的操作，可以為頁面增添生動、活潑的氛圍。而在實現這些動畫操作中，CSS技術發揮著不可替代的作用。本文將介紹一些常用的CSS動畫效果代碼。 首先我們來看一個基礎的CSS動畫效果：淡入淡出。我們可以使用以下代碼實現：

.fade-in {
opacity: 0; /* 設置透明度為0 */
transition: opacity .5s ease-in-out; /* 設置過渡效果，時間為0.5s，緩動效果為ease-in-out */
}
.fade-in.active {
opacity: 1; /* 將透明度設置為1 */
}

我們可以將這段代碼應用到一個HTML元素上，在需要顯示該元素時在其上添加.active類名即可實現淡入效果。同理，需要實現淡出效果時只需要將.active類名從HTML元素上刪除即可。 除了淡入淡出效果，我們還可以實現其他更加明顯的動畫效果，比如旋轉動畫。以下是實現旋轉動畫的代碼：

.rotate {
animation: rotate 2s linear infinite; /* 設置動畫，名稱為rotate，時間為2s，緩動效果為linear，循環次數為infinite（永久循環） */
}
@keyframes rotate {
from {
transform: rotate(0deg); /* 起始位置，設置旋轉角度為0度 */
}
to {
transform: rotate(360deg); /* 終止位置，設置旋轉角度為360度 */
}
}

同樣地，將上面的代碼應用到需要進行旋轉的HTML元素上即可實現旋轉動畫效果。 除此之外，我們還可以使用CSS實現一些比較復雜的效果，比如實現3D立體旋轉效果。以下是實現3D立體旋轉效果的代碼：

.rotate3d {
transform-style: preserve-3d; /* 設置元素保留3D形式 */
transform: rotateY(0) rotateX(0) translateZ(0); /* 設置初始狀態，不進行任何旋轉或位移 */
animation: rotate 5s linear infinite;
}
@keyframes rotate {
from {
transform: rotateY(0) rotateX(0) translateZ(0); /* 起始位置，不進行任何旋轉或位移 */
}
to {
transform: rotateY(360deg) rotateX(360deg) translateZ(100px); /* 終止位置，設置旋轉角度為360度 */
}
}

以上是幾個常用的CSS動畫效果代碼示例，通過對這些代碼的應用，我們可以為網站添加更加生動、有趣的頁面效果，提升用戶的交互體驗。