js修改animation

// HTML
<div id="animatedElement">Animate Me!</div>

// CSS
#animatedElement {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-duration: 2s;
}

// JavaScript
const element = document.getElementById('animatedElement');
element.style.animation = 'none'; // 停止动画
setTimeout(() => {
  element.style.animation = 'myAnimation 2s infinite'; // 重新开始动画
}, 10);

// 定义@keyframes
document.head.appendChild(document.createElement('style')).textContent = `
  @keyframes myAnimation {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
  }
`;

const element = document.getElementById('animatedElement');
let start;

function step(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;
  element.style.transform = `translateX(${Math.min(progress / 10, 100)}px)`;
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);

.animatedElement {
  will-change: transform;
}