Question

我尝试使用CSS3动画为背景创建滚动效果，例如：

body {
  background: url("bg.jpg") repeat-y 0 0;
  animation: animatedBackground 50s linear infinite;
}

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 0 100%; }
}

（JSFiddle）

除非在移动设备（例如Android Chrome 43.0）上非常滞后，否则效果很好。我尝试过各种各样的黑客攻击，强迫浏览器使用GPU，这实际上并没有帮助。

一种解决方案是使用translateY并复制图片，例如shown here。然而，这并不是很好，因为图像开始时非常大。但它确实运行顺畅。

我正在寻找有关如何顺利运行的替代解决方案。

Answer 1

transform background-position不能顺利运行的原因是transform可以利用手机的硬件加速，而background-position必须依赖浏览器软件的重新渲染元素。即使它是一个大图像，使用硬件加速总是更适合移动。

如果它是相同的图像，任何值得它盐的浏览器都不会因为它在第一次拉动后被缓存而产生任何额外的影响。

所以使用transform解决方案，并确信它是正确的。

Answer 2

受到OP中link的启发，我找到了一种方法来实现这一点，而无需多次引用同一图像。但是，它确实需要您知道图像的高度。

一般的想法是使用relative包装器隐藏所有溢出，并强制图像高度为200％，并使其成为repeat，最后为y轴设置动画-100％。例如：

#parallax-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#parallax-background {
  position: relative;
  width: 100%;
  height: @parallax-image-height * 2;
  background: url("/bundles/sunnerbergsimilarseries/images/tv-show-wall.jpg") repeat 0 0;
  animation: animatedBackground 50s linear infinite;
  transform: translate3d(0, 0, 0);
}

@keyframes animatedBackground {
  0% { transform: translateY(0) }
  100% { transform: translateY(-@parallax-image-height) }
}

（JSFiddle）

以上版本在2015年的Android手机和使用专用显卡的电脑上运行顺畅。

CSS3背景位置动画落后于移动设备

2 个答案: