html - 如何修复移动的背景图像不会出现故障？

Question

这是我正在进行的元素:http://i385549.hera.fhict.nl/auto.html .

因此，每 5 秒后，道路就会突然回到起点。但这会导致丑陋的“故障”。它希望它一直顺利进行。我该如何解决这个问题？

#banner{
width: 100%;
height: 300px;
margin-top: 34%;
background: url(../img2/road.jpg) repeat-x;
animation: animate-background linear 5s infinite;
}

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

提前致谢!

Answer 1

你可以改变你的动画

#banner{
width: 100%;
height: 300px;
margin-top: 34%;
background: url(../img2/road.jpg) repeat-x;
animation: animate-background linear 5s infinite;
}

@keyframes animate-background {
0% { background-position: 0%; }
50% { background-position: 100%; }
100% { background-position: 0%; }
}