CSS動畫可以讓你的網站更加生動，其中一種非常有趣的動畫效果是CSS擺動動畫。這種動畫可以讓元素像鐘擺一樣沿著一定的路徑擺動。在這篇文章中，我們將學習如何使用CSS創建擺動動畫效果。

.swing {
animation: swing 2s ease-in-out infinite;
transform-origin: top center;
}
@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(15deg);
}
100% {
transform: rotate(-15deg);
}
}

使元素進行擺動動畫的關鍵是使用CSS的transform屬性來改變元素的旋轉角度。上述示例中，我們使用了transform: rotate()來讓元素繞著頂部中心旋轉。通過改變旋轉角度的值和時間，我們可以創建不同的擺動效果。在我們的示例中，我們使用了rotate(-15deg)來讓元素傾斜到左邊，再用rotate(15deg)讓其向右傾斜，并且一直這樣交替擺動下去。

需要注意的是，為了讓元素以中心點旋轉，我們設置了transform-origin: top center屬性，這將使元素繞著其頂部的水平中心線旋轉。

最后，通過在animation中應用我們的動畫，我們可以將擺動效果應用于元素并設置其重復無限次。你可以嘗試改變動畫的時間和速度，調整旋轉角度的值來創建不同的擺動效果。祝您愉快地設計！