CSS 中的動畫效果豐富多樣，其中一個常見的效果是左右晃動動畫。這種動畫效果讓元素在水平方向上來回移動，可以增強頁面的動感和趣味性。以下是一個使用 CSS 實現左右晃動動畫的示例：

.horizontal-shake {
/* 設定一個基礎樣式，包括位置、大小、顏色等 */
position: relative;
width: 200px;
height: 100px;
background-color: #d5f5e3;
/* 設定動畫樣式 */
animation-name: shake;
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes shake {
0% {
/* 初始位置 */
left: 0;
}
25% {
/* 左移 */
left: -10px;
}
50% {
/* 右移 */
left: 10px;
}
75% {
/* 左移 */
left: -10px;
}
100% {
/* 回到初始位置 */
left: 0;
}
}

上面的示例中，我們首先為元素設定了一個基礎樣式，包括寬高和背景色等。接下來，在該元素的樣式中，我們使用了@keyframes規則來定義動畫，包括從 0% 到 100% 的不同狀態。在該示例中，我們定義了 5 個狀態，分別對應著元素在不同位置的樣式。在animation-name、animation-duration、animation-timing-function和animation-iteration-count屬性中，分別指定了動畫名稱、持續時間、時間函數和重復次數。

在實際使用中，我們可以將左右晃動動畫應用到各種元素上，比如圖片、按鈕等。通過設定不同的動畫時間、此外，我們還可以使用animation-direction屬性來指定動畫播放的方向（正序、倒序或交替播放），以進一步豐富動畫效果。