CSS 左右擺動(dòng)動(dòng)畫是一種流行的特效，它使網(wǎng)頁(yè)元素在左右來回移動(dòng)，增加頁(yè)面的動(dòng)態(tài)感。這種動(dòng)畫效果通常用于產(chǎn)品展示、廣告宣傳以及頁(yè)面特效裝飾等場(chǎng)合。

/* CSS 代碼 */
.item {
position: relative;
animation: wiggle 2s ease-in-out infinite;
}
/* 關(guān)鍵幀動(dòng)畫 */
@keyframes wiggle {
0% {
left: 0;
}
50% {
left: 50px;
}
100% {
left: 0;
}
}

在上面的代碼中，我們對(duì)“ .item ”類選擇器應(yīng)用了一個(gè)位置為相對(duì)的定位，然后使用了“ animation ”屬性來應(yīng)用“ wiggle ”關(guān)鍵幀動(dòng)畫。這個(gè)動(dòng)畫有一個(gè) 2 秒的時(shí)長(zhǎng)，使用“ ease-in-out ”動(dòng)畫函數(shù)，無限循環(huán)。

在關(guān)鍵幀動(dòng)畫中，我們定義了三個(gè)關(guān)鍵幀，分別是 0%、50%、100%。在每一個(gè)關(guān)鍵幀中，我們給“ left ”屬性設(shè)置了不同的值，這樣就可以讓元素在左右移動(dòng)了。

總結(jié)起來，CSS 左右擺動(dòng)動(dòng)畫是一種簡(jiǎn)單易用的特效，使用 CSS3 關(guān)鍵幀動(dòng)畫實(shí)現(xiàn)。它不僅可以豐富頁(yè)面特效，還可以增強(qiáng)用戶體驗(yàn)。