滚动图像无限循环 - 删除后面的空白

问：

我正在创建一个滚动图像的无限循环。我能够创建一个，但是在所有图像显示后都有一个空白区域。你能帮我删除空白区域，这样它就会顺利流动吗？谢谢

顺便说一句，我尝试添加 0 边距、0 填充但没有运气

注意：您可以插入任何图像进行尝试

这是我尝试过的：

[HTML全文]

<div id="container">
 <div class="photobanner">
<img src =""/>
<img src =""/>
<img src =""/>
</div>
</div>

CSS的

#container {
height: 400px;
position: relative;
overflow: hidden;
}

.photobanner {
position: absolute;
overflow: hidden;
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
-moz-animation: my animation 15s linear infinite;
-webkit-animation: my animation 15s linear infinite;
animation: my animation 15s linear infinite;
}

.photobanner img {
width: auto;
height: 380px;}

@keyframes my-animation {
from {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}