css背景图像动画的优化/替代

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％。我实现了“transform：translateZ（0）”和“will-change：transform”，但这些似乎没有太大作用。令人惊讶的是，在safari中它似乎由GPU处理。图像很大但我无法降低质量。对于我的案例，是否有更好的CSS动画替代方案？优选香草JS或webgl？

其次，这段代码使动画工作了一千秒然后出现了故障。有没有办法使它适当无穷无尽？

谢谢！

Answer 1

问题来自background-position - 在某些情况下，这将由cpu呈现。如果通过在div中添加占位符元素来调整此选项以使用转换，则性能应该会提高：

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>

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