在一个页面中使用多个颤动区块

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

.shake-block {
  animation: shake 1s infinite;
}

<div class="shake-block">颤动区块1</div>
<div class="shake-block">颤动区块2</div>
<div class="shake-block">颤动区块3</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('.shake-block').each(function() {
    $(this).animate({marginLeft: '-10px'}, 100)
           .animate({marginLeft: '10px'}, 100)
           .animate({marginLeft: '0'}, 100);
  });
});
</script>

<div class="shake-block">颤动区块1</div>
<div class="shake-block">颤动区块2</div>
<div class="shake-block">颤动区块3</div>