Css3关键帧循环 slider ？

Question

大家好.. 我一直在这个奇妙的 Css3 关键帧世界中训练自己。我已经看到了一些关于使用 100% css 制作的 slider 的方法，但我正在寻找不同的方法。我正在尝试做的是一个 slider ，它同时移动所有图片(用户都可以看到它们)，当它们移动时，第一张图片将不再可见，例如(左侧) , 它应该来自右边，和其他图片一样.. 直到地球停止: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>

还有一些代码

#wrapper{

margin: auto;

background-color: black;
width: 1100px;
}

#slideshow {
    margin-left: 20px;
    /*overflow: hidden;*/
    position: relative;
}

#slideshow figure{
    float: left;
    position: relative;
}

#slideshow figure.teste{
    -webkit-animation-name:sliderleft,slidertop,sliderright,sliderbottom;
    -webkit-animation-duration:5s, 5s,5s,5s;
    -webkit-animation-delay:0s,4s,9s,17s;
    /*-webkit-animation-fill-mode:forwards;*/
}
@-webkit-keyframes sliderleft{
from {left: 0px;}
to {left: -300px;}
}


  @-webkit-keyframes slidertop{
    0% {top: 0px;}
    100% {top: 200px;}
}
@-webkit-keyframes sliderright{
    from { left: 0px;}
    to {left: 750px;}
}
@-webkit-keyframes sliderbottom{
    from { bottom: 0px;}
    to {bottom: 750px;}
}

Answer 1

Demo here

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

@-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; }
}

并通过使用nth-child 和速记来应用它以节省空间

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

希望能满足您的需求。如果您有任何问题，请告诉我!