CSS是網頁設計中必不可少的一部分，它可以幫助我們實現各種各樣的效果。其中，左右擺動是一種簡單而有趣的效果，下面就讓我們來看看怎么使用CSS實現左右擺動。

代碼如下：
.box {
position: relative;
animation: swing 2s infinite;
}
@keyframes swing {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}

首先，我們需要給要實現左右擺動的元素加上一個class名，這里我使用的是.box。然后，我們需要設置元素的位置為相對定位（position: relative;），這樣才能使用動畫效果。

接著，我們要定義一個名為swing的動畫，在這個動畫中設置元素的旋轉角度，從而實現左右擺動的效果。我們將動畫設置為2秒鐘，并將它無限循環（animation: swing 2s infinite;）。

最后是關鍵部分，也就是設置元素旋轉的角度。我們使用@keyframes關鍵字來定義一個名為swing的動畫，在這個動畫中，我們設置元素在不同的時間點旋轉的角度，從而實現左右擺動的效果。

如果你想要自定義旋轉角度和時間，可以按照這個格式來設置：

0% {
transform: rotate(0deg);
}
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}

這里我們設置了6個時間點，分別是0%、20%、40%、60%、80%和100%。在這些時間點上，元素的旋轉角度分別為0度、15度、-10度、5度、-5度和0度。

到這里，我們就成功地使用CSS實現了左右擺動的效果，是不是很簡單呢？希望這篇教程可以幫助到你實現更多的有趣效果。