你能使用CSS将一个图像动画到一个随机的位置吗？

<div class="image-container">
  <img src="image.jpg" alt="Image">
</div>

.image-container {
  position: relative;
  width: 200px;
  height: 200px;
}

@keyframes moveImage {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(var(--random-x), var(--random-y));
  }
}

.image-container img {
  position: absolute;
  animation: moveImage 2s infinite;
}

const image = document.querySelector('.image-container img');
const randomX = Math.floor(Math.random() * window.innerWidth);
const randomY = Math.floor(Math.random() * window.innerHeight);

image.style.setProperty('--random-x', `${randomX}px`);
image.style.setProperty('--random-y', `${randomY}px`);