如何在颤动中切换所选图像？

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.shake {
  animation-name: shake;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
}

<img src="image1.jpg" class="shake" alt="Image 1">

function shakeImage(imageElement) {
  let x = 0;
  let y = 0;
  let direction = 1;

  function animate() {
    x += direction * 1;
    y += direction * 1;
    imageElement.style.transform = `translate(${x}px, ${y}px)`;
    if (Math.abs(x) >= 5 || Math.abs(y) >= 5) {
      direction *= -1;
    }
    requestAnimationFrame(animate);
  }

  animate();
}

const image = document.querySelector('img');
shakeImage(image);