CSS 左右搖擺動畫是一種常見的視覺效果，它可以使得頁面元素在左右方向快速旋轉，從而吸引用戶的注意力，增加頁面的交互性和吸引力。通常情況下，我們可以使用 CSS 中的關鍵幀動畫來制作這種效果。

/*創建左右搖擺動畫*/
@keyframes swing {
0% { transform: rotate(0deg); }
10% { transform: rotate(20deg); }
20% { transform: rotate(-20deg); }
30% { transform: rotate(20deg); }
40% { transform: rotate(-20deg); }
50% { transform: rotate(20deg); }
60% { transform: rotate(-20deg); }
70% { transform: rotate(20deg); }
80% { transform: rotate(-20deg); }
90% { transform: rotate(20deg); }
100% { transform: rotate(0deg); }
}
/*將動畫綁定到元素上*/
.box {
animation: swing 2s infinite;
}

代碼中我們首先使用@keyframes創建了一個名為 swings 的動畫，在動畫中，我們通過多個關鍵幀來控制元素從 0 度到 -20 度，再到 20 度，反復搖擺。然后使用.box這個 CSS 選擇器將動畫應用到了頁面中的元素上。

最后的效果就是我們實現了一個簡單的左右搖擺動畫，讓元素在頁面中動起來了。如果想要對動畫進行更多的調整，可以根據自己的需求調整animation屬性中的參數，比如動畫持續時間、動畫速度等等。同時，我們也可以使用transform-origin屬性來指定旋轉中心的位置，讓元素在不同的位置進行旋轉。