CSS 左右晃動動畫是一種常用的效果，它可以讓網(wǎng)頁看起來更加生動有趣。實現(xiàn)這種效果主要是利用 CSS3 中的 transform 屬性和 animation 屬性的組合。

首先，我們需要定義一個 div 元素，然后為它添加需要的 CSS 樣式：

div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: shake 0.9s ease-in-out infinite;
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}

在上述代碼中，我們定義了一個紅色的 div 元素，并設(shè)置了它的寬度和高度都為 100px。然后，我們使用了 position 屬性讓它的位置定位在屏幕的中央。

接著，我們使用了 transform 屬性來設(shè)置它的位置，這里我們使用了 translate(-50%, -50%) 的值來讓它居中。animation 屬性則定義了它的動畫效果，這里我們使用了 shake 這個名稱來表示晃動動畫，并設(shè)置了它的執(zhí)行時間（0.9s）、動畫曲線（ease-in-out）和循環(huán)次數(shù)（infinite）。

最后，我們定義了 shake 這個動畫的具體效果。在 keyframes 規(guī)則中，我們先定義了 0% 和 100% 時它的位置不變，然后在 10%、30%、50%、70% 和 90% 時往左邊偏移 10px，而在 20%、40%、60% 和 80% 時則往右邊偏移 10px。

總之，CSS 左右晃動動畫是一種簡單而實用的效果，可以讓網(wǎng)頁看起來更加生動有趣。我們只需要熟練掌握相關(guān)的 CSS 屬性和技巧，就可以輕松實現(xiàn)這種效果。