css和js两种方式实现div右移1000px动画

CSS 方式：

@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(1000px);
  }
}
 
.div-move {
  animation: moveRight 2s forwards;
}

HTML:

<div class="div-move">我将向右移动。</div>

JavaScript 方式：

const div = document.querySelector('.div-move');
 
function animate(duration, callback) {
  const start = performance.now();
  requestAnimationFrame(function animate(time) {
    const progress = (time - start) / duration;
    if (progress < 1) {
      callback(progress);
      requestAnimationFrame(animate);
    }
  });
}
 
animate(2000, (progress) => {
  div.style.transform = `translateX(${progress * 1000}px)`;
});

HTML:

<div class="div-move">我将向右移动。</div>

在这两种方法中，我们都定义了一个动画，使得一个 div 元素在2秒内向右移动1000像素。CSS 方法使用了 @keyframes 规则和 animation 属性，而 JavaScript 方法使用了 requestAnimationFrame 函数来实现流畅的动画效果。