ios - 如何防止此背景动画来自 'jumping'

Question

如您所见，此背景将向下动画。我拥有我想要的一切正常工作，除了在动画完成后，它会跳转，这是我不想要的。我只希望它无休止地滚动而无需跳转到它。下面的 CodePen。

关于如何在大约 10 秒后继续滚动而不跳转的任何建议

http://codepen.io/anon/pen/JEpJVL

<div> 
</div>

CSS

@-webkit-keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: 0 400px;}
}

@keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: 0 400px;}
}
div{
  height: 300px;
  width: 300px;
  background: url('https://c1.staticflickr.com/4/3405/3582443182_80cf2d4f23.jpg') repeat-y;
  -webkit-animation: backgroundScroll 10s linear infinite;
  animation: backgroundScroll 10s linear infinite;
}

Answer 1

您在最终关键帧中的背景位置必须与图像的高度相匹配，在本例中为 375 像素:

@-webkit-keyframes backgroundScroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 375px;
  }
}
@keyframes backgroundScroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 375px;
  }
}
div {
  height: 300px;
  width: 300px;
  background: url('/image/d3nOs.png') repeat-y;
  -webkit-animation: backgroundScroll 10s linear infinite;
  animation: backgroundScroll 10s linear infinite;
}

<div></div>