在Wordpress上需要无限滚动横幅的帮助

Question

关于在我正在处理的网站上构建无限滚动横幅，我有一个问题。

我是通过将所有图片放在一张图片上并将其滚动到我的页脚上方的屏幕上来制作的。

我遇到的2个问题，图像与我的外部容器重叠，我希望它只显示在指定区域中以供我的内容使用。此外我的图像不重复它将滚动整个图像然后重新开始，我想知道我是否可以重复运行图像并且没有重叠我的容器外面看起来很糟糕。

这是我为它写的代码，我非常感谢你们的任何帮助，我们要提前感谢你帮助我。

这是代码的布局。

<div class="photobanner" style="display: inline-block; height: 150px; width: 2500px; overflow: hidden;">
<img class="first" src="https://www.dcnevents.com/wp-content/uploads/2018/01/ScrollingSponsor-1.png" alt="" />
</div>

这是我为代码所做的样式：

    @keyframes "bannermove" {
     0% {
        margin-left: 0px;
     }
     100% {
       margin-left: -2150px;
     }

    }

    @-moz-keyframes bannermove {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -2150px;
     }

    }

    @-webkit-keyframes "bannermove" {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -2150px;
     }

    }

    @-ms-keyframes "bannermove" {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -2150px;
     }

    }

    @-o-keyframes "bannermove" {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -2150px;
     }

    }
 .photobanner img{
     -webkit-transition: all 0.5s ease; 
        -moz-transition: all 0.5s ease; 
        -o-transition: all 0.5s ease; 
        -ms-transition: all 0.5s ease; 
        transition: all 0.5s ease; 
    }
    p .first{
        -webkit-animation: bannermove 30s linear infinite; 
           -moz-animation: bannermove 30s linear infinite; 
            -ms-animation: bannermove 30s linear infinite; 
             -o-animation: bannermove 30s linear infinite; 
                animation: bannermove 30s linear infinite; 
        display:inline-block; 
    }