Question

我需要一张整页的背景图片，从右向左缓慢平移并无限重复。这是我的CSS：

#animatedBackground {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  will-change: transform;
/* transform: translate3d(0, 0, 0); */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("https://i.stack.imgur.com/WmL0s.jpg");
  background-repeat: repeat;
  background-position: 0 0;
  background-size: auto 100%;
  animation: animatedBackground 1000s linear infinite;
}

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 0;
  }
}

<div id="animatedBackground"></div>

我在Macbook Pro Retina 2015上工作。我的问题是在chrome和firefox中，我的CPU使用率上升到100％，当我减小窗口尺寸时，CPU使用率下降了一点。我实现了“ transform：translateZ（0）”和“ will-change：transform”，但是这些似乎没有太大作用。令人惊讶的是，在野生动物园中，它似乎由GPU处理。图像很大，但是我无法降低画质。对于我的案例，是否有比CSS动画更好的替代方法？最好是香草JS或webgl？

第二，此代码使动画工作一千秒，然后出现故障。有没有办法使它永无止境？

谢谢！

Answer 1

问题来自background-position-在某些情况下，这将由CPU呈现。如果您通过在div中添加一个占位符元素来将其调整为使用transform，则性能应会提高：

https://jsfiddle.net/kofn5dyr/27/

基本思想：
无需设置背景动画，而是在第一个div内添加包装器。
使用transform对这个包装器进行动画处理，因为gpu将处理该转化。

#animatedBackground {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

#animatedBackground > div {
  height: 100%;
  width: 2526px;
  background: url(https://wallpaperbrowse.com/media/images/4643298-images.jpg);
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
  animation: moveSlideshow 12s linear infinite;
}

@keyframes moveSlideshow {
  100% { 
    transform: translateX(-66.6666%);   
  }
}

<div id="animatedBackground">
  <div></div>
</div>

我用动画效果更明显的图像对示例进行了一些调整，请在项目中根据需要调整所有示例值。也许还可以根据需要添加浏览器前缀。

CSS背景图片动画的优化/替代方法

1 个答案: