CSS3左右搖晃的動畫怎么寫

CSS3提供了強大的動畫功能，可以實現(xiàn)各種復雜的動畫效果，包括左右搖晃的動畫，下面是一些實現(xiàn)CSS3左右搖晃動畫的方法：

1、使用@keyframes規(guī)則創(chuàng)建動畫

@keyframes規(guī)則用于創(chuàng)建動畫，通過定義關(guān)鍵幀，可以定義動畫在不同時間點的樣式，可以創(chuàng)建一個從左側(cè)移動到右側(cè)，然后再移動到左側(cè)的動畫：

@keyframes shake {
  0% { transform: translateX(0); }
  50% { transform: translateX(-20px); }
  100% { transform: translateX(0); }
}

2、應用動畫到元素

將創(chuàng)建的動畫應用到元素上，可以使用animation屬性：

div {
  animation: shake 1s infinite;
}

這將使div元素進行左右搖晃的動畫。1s表示動畫持續(xù)時間為1秒，infinite表示動畫將無限循環(huán)。

3、調(diào)整動畫效果

可以根據(jù)需要調(diào)整動畫效果，例如改變搖晃的幅度、速度等，可以通過修改transform屬性的值來實現(xiàn)：

@keyframes shake {
  0% { transform: translateX(0); }
  50% { transform: translateX(-50px); }
  100% { transform: translateX(0); }
}

這將使元素進行更大幅度的搖晃。

通過以上方法，可以實現(xiàn)CSS3左右搖晃的動畫效果，可以根據(jù)具體需求進行調(diào)整和優(yōu)化。