CSS动画不够流畅答案

【问题标题】：CSS animation not smooth enoughCSS动画不够流畅
【发布时间】：2021-05-11 18:34:35
【问题描述】：

动画从左到右线性移动，但在动画时间结束后突然开始。尝试减少到 1 秒并将时间增加到 15 秒。甚至增加了关键帧但仍然不起作用。请帮忙：

.grid-item-2 {
  grid-column: 1 / span 2;
  grid-row: 1;
  background-image: url(Building_1.png);
  margin-left: 100px;
  margin-top: 53px;
  width: 90%;
  background-repeat: repeat-x;
  animation: Buildings 2s linear infinite;
}

@keyframes Buildings {
  0% { background-position: 0% 100%; }
  25% { background-position: 25% 75%; }
  50% { background-position: 50% 50%; }
  75% { background-position: 75% 25%; }
  100% { background-position: 100% 0; }
}

&lt;div class="grid-item grid-item-2"&gt;&lt;/div&gt;

【问题讨论】：

试试animation: Buildings 2s linear infinite alternate;
它应该是建筑物在移动，因此它前面的汽车看起来像是在移动。不能替代
与您使用的图像分享您的完整代码，以便我们查看

标签： html css css-animations keyframe

【解决方案1】：

跳跃的问题是你需要让背景图片适应 div 元素的大小，如果你想要一个响应式的网站，这可能很难。下面的代码是我能想到的最好的代码，我在 -100% 和 200% 之间循环，使图像从元素外部开始，然后在元素的另一侧结束，产生它继续的错觉。老实说，我会用repeat 替换repeat-x。

我添加了背景颜色只是为了让元素更明显。

.grid-item-2 {
  grid-column: 1 / span 2;
  grid-row: 1;
  background-image: url("https://picsum.photos/id/737/300/200.jpg");
/*  margin-left: 100px;
  margin-top: 53px; */
  width: 90%;
  background-repeat: repeat-x;
  background-size: 50% 50%;
  animation: Buildings 3s linear infinite;
  
  background-color: #000; /* just to show case the element better */
  height: 90vh;
}

@keyframes Buildings {
  0% { background-position: -100% 200%; }
  100% { background-position: 200% -100%; }
}

<div class="grid-item-2">

</div>

【讨论】：

【解决方案2】：

去掉中间关键帧会使它更流畅。您只需要 0% 和 100% 的帧。当您将动画计时功能设置为线性时，它会自动确保满足您定义的所有关键帧。动画应该是这样的......

@keyframes Buildings {
    0% {
      background-position: 0% 100%;
    }
    100% {
      background-position: 100% 0;
    }
  }

【讨论】：

OP 声明：“动画从左到右线性移动，但动画时间结束后突然开始”。
嗨 Musab，一旦完成一次迭代，动画就会从 0% 重新开始。我希望它在上一次迭代中从它完成的地方开始
Hey Suparna，您只需在定义动画后添加“alternate”一词即可获得该效果。所以现在您的动画定义将显示为animation: Buildings 2s linear infinite alternate;
@SuparnaBose 每次播放时都会反转动画。所以第一次，背景将从左上角开始移动到右下角，然后它会从右下角回到左上角，并重复该模式。由于您使用的是 linear 计时功能，它的末端看起来仍然有点生涩，所以我建议使用 ease-in-out 进行切换以进行定义现在阅读animation: Buildings 2s ease-in-out infinite alternate; 现在它会更快地向动画中间移动并在改变方向之前减速。