CSS 3动画-在屏幕上滑动

我有这样一个：它充当标题和主要内容之间的分隔符

该图像被设置为标题容器的背景图像repeat-x

<header> <--- image is background of this
    <div id="container"></div>
</header>

---

我建议使用jQuery和一个简单的图像滑块，并缩短图像暂停时间，以便图像继续切换。据我所知，它不可能得到一个视频出现在滑块（不是没有某种播放按钮）。这将是我将使用的示例。
试试这个

CSS:

我在这里为你制作了一把小提琴：
如果将：displayTime:10000更改为displayTime:1（例如），则会继续切换图像。（只需添加两次相同的图像）认为您可能没有抓住要点。我不要滑球。这是一幅在屏幕宽度上重复出现的图像。然而，我不希望它是静态的，而是希望它在页面上移动。有点像这样：但也从右向左移动。
header {
    width: 100%;
    height: 150px;
    background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png); //replace with your image
    background-position: 0px;
    background-repeat: repeat-x;
    -webkit-animation: myanim 5s infinite linear;
       -moz-animation: myanim 5s infinite linear;
         -o-animation: myanim 5s infinite linear;
            animation: myanim 5s infinite linear;
}

@-webkit-keyframes myanim {
    0%   { background-position: 0px; }
    100% { background-position: 100px; } /* set this to the width of the image */
}
@-moz-keyframes myanim {
    0%   { background-position: 0px; }
    100% { background-position: 100px; } /* set this to the width of the image */
}
@-o-keyframes myanim {
    0%   { background-position: 0px; }
    100% { background-position: 100px; } /* set this to the width of the image */
}
@keyframes myanim {
    0%   { background-position: 0px; }
    100% { background-position: 100px; } /* set this to the width of the image */
}