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

Question

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

我已尝试查看此处的问题，但它们主要集中在 slider 上。

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

<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

不断向上移动的实例:

#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>