在页面加载时停止自动启动关键帧动画

.animation-element {
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

.animation-element.paused {
  animation-play-state: paused;
}

window.addEventListener('load', function() {
  var animationElement = document.querySelector('.animation-element');
  animationElement.classList.add('paused');
});

<div class="animation-element"></div>

<script>
window.addEventListener('load', function() {
  var animationElement = document.querySelector('.animation-element');
  var animation = animationElement.animate([
    { transform: 'translateX(0)' },
    { transform: 'translateX(100px)' }
  ], {
    duration: 3000,
    iterations: Infinity
  });
  
  animation.pause();
});
</script>

<div class="animation-element"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script>
window.addEventListener('load', function() {
  var animationElement = document.querySelector('.animation-element');
  var animation = gsap.to(animationElement, {
    x: 100,
    duration: 3,
    repeat: -1,
    yoyo: true
  });
  
  animation.pause();
});
</script>