Html 如何使背景图像移动一段时间，然后开始向后移动，然后重新开始？

目前，我使用本文中的代码将背景图像移到左侧。但问题是，我的背景图像不是无限的，一旦用完，就会有一个丑陋的跳跃回到开始。有没有办法防止这种情况发生，或者让它再次发生？ 以下是我的html和css：

<div class="cantstyle">
<div id="0" class="slidebg bg" style="min-height:100em;background-image:url('footer_lodyas.png');">
<div class="hvr-underline-from-center" style="text-align:center; color:white;">
<h3 style="font-size:6em;color:white;text-align:center;margin-top:15%;"> title <span class="hvr-grow">t</span><span class="hvr-grow">t</span><span class="hvr-grow">l</span><span class="hvr-grow">E</span> </h3>
<p style="font-size:1.2em;"> subtitle </p>
<p><a href="#1">Home</a>  |  <a href="#2">Tab2</a>  |  <a href="#3">Tab3</a>  |  <a href="#4">Tab4</a></p>
</div>
</div>
</div>

---

我认为您应该制作另一段代码，专门用于将背景图像移回原处。您可能只需要再次重复当前代码，而不是将其向前移动，而是将其向后移动

试试这个：

@-moz关键帧幻灯片{
0% {
背景位置：200px 0px；
}
100% {
背景位置：0px 0px；
}
}
@-moz关键帧slideBg{
0% {
背景位置：200px 0px；
}
100% {
背景位置：0px 0px；
}
}

您可以提供一把小提琴吗？这仍然会导致最后突然跳起。我像你说的那样单独添加了这个，但是仍然是突然的跳跃。你能提供给我你所有的html代码吗？我把它添加到了主帖子中

 .bg:hover {
        background-image: url("footer_lodyas.png");
       -webkit-animation: 3s slideBg infinite linear;
        -moz-animation: 3s slideBg infinite linear;
    }
    @-webkit-keyframes slideBg {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 200px 0;
        }
    }
    @-moz-keyframes slideBg {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 200px 0;
        }

    }