CSS3 動畫效果是網頁設計中不可或缺的一部分。它們使得元素以動態和有趣的方式呈現，讓網站變得更加生動和吸引人。在本文中，我們將展示一些常見的 CSS3 動畫效果。

/* 旋轉動畫 */
.rotate {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 縮放動畫 */
.scale {
animation: scale 1s ease-in-out infinite alternate;
}
@keyframes scale {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
/* 偏移動畫 */
.translate {
animation: translate 1s ease-out infinite;
}
@keyframes translate {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(0);
}
}
/* 消失動畫 */
.fade-out {
animation: fade-out 1s ease-out forwards;
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

以上是常見的四種動畫效果展示，通過animation屬性和@keyframes規則實現。其中@keyframes規則定義了動畫的關鍵幀，而animation屬性則控制動畫的持續時間，速度曲線，方向和循環次數。

除了這些基本的動畫效果，CSS3 動畫還支持更豐富的特性，如變形，漸變，陰影等等，可以用來創建更豐富和復雜的動畫效果。

總之，CSS3 動畫效果為網頁設計提供了更多的創造力和技巧。掌握這些技術，可以讓你的網站更有吸引力和生動性。