如何创建不随背景图像跳跃的关键帧平滑连续循环？

Question

我创建了一个带有背景图片的 div。使用关键帧动画，我希望它连续垂直向上移动，但它会在帧的末尾跳跃然后继续。我是关键帧的新手。我不会用JS。

我试过查看此处的问题，但它们主要集中在滑块上。

到目前为止，这是我的代码：

<style>
#animate-area   { 
    background-image: url(/image.png);
    width: 100%;
    height: 500px;
    background-position: 0px 0px;
    background-repeat: repeat-x;

    -webkit-animation: animatedBackground 5s ease-in-out infinite;
    -moz-animation: animatedBackground 5s ease-in-out infinite;
    animation: animatedBackground 5s ease-in-out infinite;
}

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

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

@keyframes animatedBackground {
   from { background-position: 0 0; }
   to { background-position: 0 100%; }
}
</style>

<div id="animate-area"></div>

帧一结束，它就会跳转然后继续。是否可以让它连续循环而不用背景图像跳转？如果可以，怎么做？

Answer 1

你可以使用两个相同的图像，但坐标相反来移动from/to :

#animate-area {
  background-image: url(http://dummyimage.com/100&text=img_1), url(http://dummyimage.com/100&text=img_2);
  width: 100%;
  height: 500px;
  background-position: 0px 0px, 0 -100%;
  background-repeat: repeat-x;
  animation: animatedBackground 5s ease-in-out infinite;
}

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

<div id="animate-area"></div>

不同的文本用于显示发生的情况

Answer 2

持续向上的实例：

#animate-area {
  background-image: url('https://pt.freelogodesign.org/Content/img/logo-ex-2.png');
  width: 100%;
  height: 500px;

  background-position: 0;
 animation: slideup 5s linear 1s infinite;
 
 position:absolute;
}

@keyframes slideup {
  0% { background-position: 0 0; }
  50% { background-position: 0 -500px; }
  100% { background-position: 0 -900px; }
}

<div id="animate-area"></div>

如何创建不随背景图像跳跃的关键帧平滑连续循环？

How to create a keyframe smooth continuous loop that doesn't jump with a background image?

css

keyframe

css-animations

持续向上的实例：