在CSS中，我們可以使用@keyframes規(guī)則來創(chuàng)建動畫，為了制作一個左右晃動的動畫，我們可以定義一個從0%到100%的動畫，其中50%是動畫的中點，此時元素會達到***左側(cè)或***右側(cè)的位置，以下是一個簡單的示例：

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}
.shake:hover {
  animation: shake 0.5s;
}

在這個示例中，我們定義了一個名為shake的動畫，當元素被懸停時，該動畫會在0.5s內(nèi)執(zhí)行，動畫的關(guān)鍵幀包括：

0%和100%：元素保持在原始位置，即translateX(0)。

50%：元素移動到***左側(cè)或***右側(cè)的位置，即translateX(10px)。

你可以根據(jù)需要調(diào)整動畫的持續(xù)時間、移動距離以及任何其他樣式屬性，這種方法可以創(chuàng)建簡單但效果顯著的動畫，使你的網(wǎng)站更加吸引人。