CSS關鍵幀動畫是一種非常有趣的動畫效果，其中左右搖擺動畫被廣泛使用。以下是如何使用CSS關鍵幀動畫創建左右搖擺動畫的方法：

@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(10px); }
50% { transform: translateX(0); }
75% { transform: translateX(-10px); }
100% { transform: translateX(0); }
}
.shake-element {
animation: shake 1s infinite;
}

在上面的代碼中，我們創建了一個名為“shake”的關鍵幀動畫，其中動畫效果是將元素沿著X軸來回擺動。這個動畫一開始把元素移到了右側，然后再移到左側，再移到右側，如此往復，創建了一個連綿不斷的動畫效果。我們還將這個動畫設置為無限循環。

然后，在HTML中，我們只需要給元素添加一個名為“shake-element”的類，就可以讓它擁有這個搖晃動畫了。當然，你可以修改CSS的樣式來定制你自己的動畫。

總結一下，CSS關鍵幀動畫是一個非常有趣、靈活的動畫效果，可以為網頁增添生動活潑的氣息。左右搖晃動畫則是其中一種經典的效果，通過使用簡單的代碼可以輕松實現。當你學會了這種技巧之后，你可以進行無限創意和探索，為你的網頁帶來更多的精彩效果。