CSS動畫是網頁設計中常用的技術，可以通過CSS代碼實現豐富的動畫效果，為網頁增添生動感和交互性。下面介紹10個常用的CSS動畫效果。

1. 漸變過渡動畫
.box {
background-color: #f00;
transition: background-color 1s;
}
.box:hover {
background-color: #00f;
}
2. 旋轉動畫
.box {
animation: rotate 2s infinite ease-in-out;
}
@keyframes rotate {
0% {
transform:rotate(0);
}
100% {
transform:rotate(360deg);
}
}
3. 縮放動畫
.box {
animation: scale 0.5s infinite alternate ease-in-out;
}
@keyframes scale {
0% {
transform:scale(1);
}
100% {
transform:scale(2);
}
}
4. 跳動動畫
.box {
animation: jump 1s infinite ease-in-out;
}
@keyframes jump {
0%, 100% {
transform:translateY(0);
}
50% {
transform:translateY(-15px);
}
}
5. 晃動動畫
.box {
animation: shake 0.5s infinite ease-in-out;
}
@keyframes shake {
0%, 100% {
transform:translateX(0);
}
25% {
transform:translateX(5px);
}
75% {
transform:translateX(-5px);
}
}
6. 閃爍動畫
.box {
animation: blink 0.5s infinite alternate ease-in-out;
}
@keyframes blink {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
7. 水平切入動畫
.box {
animation: slide-in-right 1s ease-in-out;
}
@keyframes slide-in-right {
from {
transform:translateX(100%);
}
to {
transform:translateX(0);
}
}
8. 漸顯動畫
.box {
animation: fade-in 1s ease-in-out;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
9. 餅圖動畫
.pie-chart {
animation: pie 1s ease-out;
}
@keyframes pie {
from {
transform:rotate(0);
}
to {
transform:rotate(360deg);
}
}
10. 翻頁動畫
.card {
transform-style: preserve-3d;
transition: transform 0.5s;
}
.card:hover {
transform: rotateY(180deg);
}

以上是10個常用的CSS動畫效果，可以使用它們為網頁增添生動感和交互性，提高用戶體驗。