CSS3動畫已經成為現在網頁設計的必備技能之一。它能夠使網頁元素運動起來并且?guī)в辛鲿车倪^渡效果，不僅可以提升網頁的用戶體驗，還可以吸引用戶的注意力，讓網頁更加生動。

以下是一些常見的CSS3動畫應用：

/* 1.旋轉動畫 */
.rotate {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
/* 2.縮放動畫 */
.scale {
animation: scale 2s linear infinite;
}
@keyframes scale {
from {transform: scale(1);}
to {transform: scale(1.5);}
}
/* 3.彈跳動畫 */
.bounce {
animation: bounce 2s linear infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
/* 4.淡入淡出動畫 */
.fade {
animation: fade 2s linear infinite;
}
@keyframes fade {
from {opacity: 1;}
to {opacity: 0.5;}
}

除了以上的動畫應用，CSS3還可以實現更加復雜的動畫效果，如路徑動畫、滾動動畫和透視動畫等。通過掌握這些技能，我們可以創(chuàng)造出更加豐富多彩的網頁效果，增強網頁品質。