javascript - CSS动画无法正常播放

我有一个网站的介绍性部分，其中4个字母（SVGS）弹出到屏幕上。大多数时候，它都可以正常播放。但是，有时有时一两个或所有图像根本不会动画。我不确定是什么原因造成的（不是缓存），页面刷新通常可以解决该问题。我想念什么吗？我是否应该等待图像加载以及整个DOM准备就绪？

这是相关的CSS（Sass）。

动画：

@keyframes bobble {
  0% {
    transform: translateY(124px) scale(0.8, 1.6);
  }
  25% {
    transform: translateY(-64px) scale(1.6, 0.8);
  }
  55% {
    transform: translateY(16px) scale(0.9, 1.1);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

造型

.hello-header-img {
  height: 100%;
  width: 100%;
  opacity: 0;
  animation: bobble $animation-duration cubic-bezier(0.64, 0.57, 0.67, 1.53);
  animation-fill-mode: forwards;
  animation-play-state: paused;
  will-change: transform, opacity;

  // Plays animations when images have loaded (JS)
  .is-ready & {
    animation-play-state: running;
  }
}

每个字母还有一个动画延迟，该延迟从0.4s开始，每个字母增加0.3s（所以letter 1 = 0.4s delay，letter 2 = 0.7s delay，letter 3 = 1s delay等）。

Java脚本

const imgs = document.querySelectorAll('.hello-header img');
let counter = 0;
let hasScrolled = false;

// Animate after hello section images have loaded
[].forEach.call( imgs, function( img ) {
  img.addEventListener( 'load', ()=> {
    counter++;
    if ( counter === imgs.length ) {
      document.querySelectorAll('.js-hello-header')[0].classList.add('is-ready');
    }
  }, false );
});

最佳答案

尝试用translate和scale（使用适当的参数）替换translate3d和scale3d。

通常，translate和scale占用大量CPU资源，而其3d副本则利用图形卡的硬件加速功能，因此播放动画要流畅得多。