CSS3動畫是網頁設計中常用的一種技術，能讓網頁更加生動有趣。其中一個非常實用的動畫效果是擺動效果，通過簡單的代碼實現一個物體不斷擺動起來。下面我們來看看如何利用CSS3實現這種擺動效果。

.swing {
animation-name: swing;
animation-duration: 2s;
animation-iteration-count: infinite;
transform-origin: bottom center;
transform-style: preserve-3d;
}
@keyframes swing {
0%,
100% {
transform: rotate(0deg);
}
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
}

在上面的代碼中，我們定義了一個名為.swing的class，把這個class應用到需要實現擺動效果的物體上。接著，在.style中定義了幾個關鍵屬性：

• animation-name：指定本動畫的名稱。
• animation-duration：指定動畫的持續時間。
• animation-iteration-count：指定動畫的播放次數，這里我們設置為無限循環。
• transform-origin：指定物體繞著哪個點進行旋轉。
• transform-style：指定物體的子元素是否需要保持原來的3D狀態。

接著，在代碼的最后面定義了一個名為swing的關鍵幀動畫。在這里，我們分配了擺動效果的各個節點狀態，使物體不斷地在正負15度之間進行隨機的旋轉。

利用上面這段代碼，就可以輕松地為頁面元素添加擺動效果了。大家可以自行根據需要進行調整，創造出更加炫酷的效果。