CSS3動畫效果在網頁設計中越來越受歡迎，因為它可以幫助網頁設計師制作出更為出色的動態效果。在本文中，我們將探討一些基本的CSS3動畫效果。

/* 效果1：旋轉動畫 */
.rotate {
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 效果2：縮放動畫 */
.scale {
animation-name: scale;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes scale {
from { transform: scale(1); }
to { transform: scale(1.5); }
}
/* 效果3：移動動畫 */
.move {
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes move {
from { transform: translateX(0px); }
to { transform: translateX(200px); }
}

這里我們有三個不同的動畫效果。為了實現這些效果，我們使用了CSS3的“animation”屬性，并在每個動畫效果中定義了不同的關鍵幀（Keyframes）。通過控制這些關鍵幀，我們可以控制HTML元素的位置，旋轉和縮放，以創造出各種令人驚嘆的動態效果。

在實際應用中，我們可以根據需求使用不同的動畫效果并將其應用到HTML元素中，以使網頁更加生動有趣，吸引用戶的眼球。