javascript - CSS 动画无法正常播放

Question

我有一个网站的介绍部分，屏幕上会弹出 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.4 秒开始，每个字母增加 0.3s(所以 letter 1 = 0.4s delay，letter 2 = 0.7s 延迟，字母 3 = 1s 延迟，等等)。

Javascript

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 );
});

Answer 1

尝试将 translate 和 scale 替换为 translate3d 和 scale3d(使用适当的参数)。

translate 和 scale 通常占用大量 CPU，而它们的 3d 对应物利用显卡的硬件加速，因此播放动画更加流畅。