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 delay，letter 3 = 1s delay等。< / p>

的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版本则使用显卡的硬件加速功能，因此播放动画更加流畅。

CSS动画无法正常播放

1 个答案: