Question

我想在更长的时间内（例如60秒）用CSS平滑地设置背景图片的位置：

#movingbackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Bigsurflowers.jpg/1280px-Bigsurflowers.jpg');
  overflow: hidden;
  background-position: left center;
  animation: zoomin 60s ease-in infinite;
}

@-webkit-keyframes zoomin {
  0% { background-position: 0% center; transform: scale(1.0); }
  50% {background-position: 100% center; transform: scale(1.2); }
  100% { background-position: 0% center; transform: scale(1.0); }
}
@keyframes zoomin {
  0% { background-position: 0% center; transform: scale(1.0); }
  50% {background-position: 100% center; transform: scale(1.2); }
  100% { background-position: 0% center; transform: scale(1.0); }
}

<div id="movingbackground"></div>

开头和结尾的小动作每秒“跳跃”几个像素而不是缓慢移动（可能取决于屏幕尺寸）。

其原因可能是没有足够的移动来填充所需的帧数，尤其是在简化动画时。我想我已经看到这种效果在某处可以顺利使用，我想知道如何解决这个问题。

这里也是Fiddle。

Answer 1

background-position的动画使浏览器可以进行布局，绘画和合成。
重新布局和重新绘制会占用大量CPU资源，并导致“跳跃”。

相反，您可以将背景应用于伪元素（或在HTML中使用<img>），并使用3d转换为其transform属性设置动画。

这将使浏览器将GPU用作动画，动画将在合成阶段相当顺利地运行。

请参见下面的代码段

html,
body {
  margin: 0;
  padding: 0
}

#movingbackground {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#movingbackground:before {
  content: '';
  position: absolute;
  top: 0; left: 0; z-index: -1;
  height: 100%;
  width: 200%;
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Bigsurflowers.jpg/1280px-Bigsurflowers.jpg) 0 50% / cover;
  animation: zoomin 60s ease-in infinite;
}

@keyframes zoomin {
  50% {
    transform: translateX(-50%) scale(1.2)
  }
}

<div id="movingbackground"></div>

Answer 2

我做了一些测试，得出的结论是不可能。（至少具有转场或动画）

问题在于浏览器在屏幕上渲染图像的方式。图片的像素显然与屏幕上的像素对齐。

因此，图片总是一次恰好“跳跃”一个像素。

这意味着，图像中的像素越多，将执行的步骤越多。但是，使用ease-in时，它总是会在开始时结结巴巴。

我想我已经看到这种效果在某处可以正常运行

css可能无法实现。

长CSS动画缓动（背景位置）

2 个答案: