如何确定移动的背景图像不会出现故障？

Question

以下是我正在处理的项目：http://i385549.hera.fhict.nl/auto.html。

所以在每5秒后，道路就会弹回到起点。但这导致了一个丑陋的故障＆＃34;。它希望它一直顺利进行。我该如何解决这个问题？

#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%; }
}