Question

如您所见，此背景将动画下来。我有我想要的一切正常工作，除非在动画结束后，它使我跳过这个我不想要的。我只是希望它无休止地滚动而不必跳转到它。 CodePen下面。

关于如何在大约10秒之后继续滚动而没有跳跃的任何建议

<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

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

＆＃13;

@-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('https://i.stack.imgur.com/d3nOs.png') repeat-y;
  -webkit-animation: backgroundScroll 10s linear infinite;
  animation: backgroundScroll 10s linear infinite;
}

＆＃13;

<div></div>

＆＃13;

如何防止这种背景动画“跳跃”

1 个答案: