CSS動畫是網頁設計和前端開發中常見的操作方式，可以通過運用CSS屬性和關鍵幀實現各種動畫效果。以下是幾種常見的CSS動畫效果。

/* 1. 旋轉動畫 */
.rotate {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 2. 縮放動畫 */
.scale {
animation: scale 2s ease-in-out infinite;
}
@keyframes scale {
from {
transform: scale(1);
}
to {
transform: scale(1.5);
}
}
/* 3. 淡入淡出 */
.fade {
animation: fade 2s ease-in-out infinite alternate;
}
@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0.5;
}
}
/* 4. 移動動畫 */
.move {
animation: move 2s ease-in-out infinite alternate;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
/* 5. 翻轉動畫 */
.flip {
animation: flip 2s ease-in-out infinite;
}
@keyframes flip {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
}
}

以上是CSS動畫效果的幾種常見實現方式，通過CSS動畫可以為網頁增添更多的動感元素和交互效果，提高用戶的瀏覽體驗。