CSS動畫效果是現代網頁設計中不可或缺的一環。通過CSS的屬性和選擇器，我們可以實現各種炫酷的動畫效果。以下是一些常見的CSS動畫效果。

/* 旋轉動畫 */
.rotate {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 跳躍動畫 */
.jump {
animation: jump 1s ease-in-out infinite alternate;
}
@keyframes jump {
from {
transform: translateY(0);
}
to {
transform: translateY(-50px);
}
}
/* 漸變動畫 */
.gradient {
animation: gradient 2s ease infinite alternate;
}
@keyframes gradient {
0% {
background: #ff9a9e;
}
50% {
background: #fad0c4;
}
100% {
background: #ffd1ff;
}
}
/* 淡入動畫 */
.fade-in {
animation: fade-in 1s ease-in;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 放大動畫 */
.scale-up {
animation: scale-up 2s ease-in-out;
}
@keyframes scale-up {
from {
transform: scale(1);
}
to {
transform: scale(1.5);
}
}

以上是幾種常見的CSS動畫效果。你可以根據自己的需求，自由組合調整屬性和選擇器，創造出更加炫酷的動畫效果。