Css3关键帧循环滑块？

怎么了，伙计们。。我一直在练习Css3关键帧的奇妙世界。 我见过一些关于使用100%css制作的滑块的方法，但我正在寻找一些不同的方法。 我想做的是一个滑块，它可以同时移动所有图片（用户都可以看到），当它们移动时，当第一张图片不可见时，例如（左侧），它应该从右侧移动，其他图片也一样。。直到地球停止：D。 我想做什么是可以理解的？但我不知道怎么做。 请帮帮我！ 谢谢你的帮助。 下面是一些代码：

<div id="wrapper">
            <div id="slideshow">

                <figure class="teste">
                    <img src="images/daya1.jpg" alt="">
                </figure>
                 <figure class="teste">
                    <img src="images/daya2.jpg" alt="Profile of a Red kite">
                </figure>
                 <figure class="teste3">
                    <img src="images/daya3.jpg" alt="Profile of a Red kite">
                </figure>
                 <figure class="test4">
                    <img src="images/daya4.jpg" alt="Profile of a Red kite">
                </figure>

            </div>

由于您希望元素从左侧滑出时在右侧重复，因此必须为每个图片使用单独（但类似）的动画。对我来说那是

@-webkit-keyframes sliderfirst {
    0%   { left:    0px; }
    12%  { left: -300px; }
    13%  { left: 1200px; opacity:0; }
    14%  {   opacity: 1; }
    25%  { left:  900px; }
    50%  { left:  600px; }
    75%  { left:  300px; }
    100% { left:    0px; }
}
@-webkit-keyframes slidersecond {
    0%   { left:  300px; }
    25%  { left:    0px; }
    37%  { left: -300px; }
    38%  { left: 1200px; opacity:0; }
    39%  {   opacity: 1; }
    50%  { left:  900px; }
    75%  { left:  600px; }
    100% { left:  300px; }
}
@-webkit-keyframes sliderthird {
    0%   { left:  600px; }
    25%  { left:  300px; }    
    50%  { left:    0px; }
    62%  { left: -300px; }
    63%  { left: 1200px; opacity:0; }
    64%  {   opacity: 1; }
    75%  { left:  900px; }
    100% { left:  600px; }
}
@-webkit-keyframes sliderfourth {
    0%   { left:  900px; }
    25%  { left:  600px; }    
    50%  { left:  300px; }    
    75%  { left:    0px; }
    87%  { left: -300px; }
    88%  { left: 1200px; opacity:0; }
    89%  {   opacity: 1; }
    100% { left:  900px; }
}

并通过使用第n个子项和速记来应用它，以节省空间

#slideshow figure.teste {
    position:absolute;
}
#slideshow figure.teste:nth-child(4n-3) {
    left:0px;
    -webkit-animation:sliderfirst 15s linear infinite;
}
#slideshow figure.teste:nth-child(4n-2) {
    left:300px;
    -webkit-animation:slidersecond 15s linear infinite;
}
#slideshow figure.teste:nth-child(4n-1) {
    left:600px;
    -webkit-animation:sliderthird 15s linear infinite;
}
#slideshow figure.teste:nth-child(4n) {
    left:900px;
    -webkit-animation:sliderfourth 15s linear infinite;
}

---

我希望它适合你的需要。如果你有任何问题，请告诉我

你最终解决了你的问题吗？

#slideshow figure.teste {
    position:absolute;
}
#slideshow figure.teste:nth-child(4n-3) {
    left:0px;
    -webkit-animation:sliderfirst 15s linear infinite;
}
#slideshow figure.teste:nth-child(4n-2) {
    left:300px;
    -webkit-animation:slidersecond 15s linear infinite;
}
#slideshow figure.teste:nth-child(4n-1) {
    left:600px;
    -webkit-animation:sliderthird 15s linear infinite;
}
#slideshow figure.teste:nth-child(4n) {
    left:900px;
    -webkit-animation:sliderfourth 15s linear infinite;
}