CSS3关键帧循环滑块？答案

【问题标题】：Css3 keyframe cycle slider?CSS3关键帧循环滑块？
【发布时间】：2013-10-18 03:59:09
【问题描述】：

怎么了伙计们..我一直在训练自己了解这个奇妙的 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>

还有一些其他的代码

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

【问题讨论】：

您的问题最终解决了吗？

标签： css animation css-animations

【解决方案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;
}

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

【讨论】：