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

Question

我试图用CSS在更长的时间内平滑地为背景图像位置设置动画，比方说60秒：

#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实现的。