html - 如何自动播放这个纯 CSS3 幻灯片？

Question

更新:这里的问题是(请参阅当前 CSS)，一旦最后(第二个)图像出现，返回第一张图像的动画会立即发生，没有延迟。我希望将第二张图片的动画延迟应用于第一张图片，而不是直接返回第一张图片(在 translationX(0))。

我有一个幻灯片，如下面的代码所示:

.slideshowcontainer {
    width:800px;
    height:400px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    text-align:center;
    overflow:hidden;
    position:relative;
    top:30px;
    border-style:solid;
    border-width:10px;
    border-color:white;
    border-radius:15px;
}     


.imagecontainer {
    width:1600px;
    height:400px;
    clear:both;
    position:relative;            
    -webkit-transition:left 3s;
    -moz-transition:left 3s;
    -o-transition:left 3s;
-ms-transition:left 3s; 
    transition:left 3s;
animation:scroller 16s infinite;
}


@keyframes scroller {
  	0% {transform:translateX(0);}
  	31.25% {transform:translateX(0);}
50% {transform:translateX(-800px);}
    81.25% {transform:translateX(-800px);}
    100% {transform:translateX(0);}
}


.slideshowimage {
    float:left;
    margin:0px;
    padding:0px;
    position:relative;
}

#slideshowimage-1:target ~ .imagecontainer {
    left:0px;
}


#slideshowimage-2:target ~ .imagecontainer {
    left:-800px;
}


.buttoncontainer {
    position:relative;
    top:-20px;
}


.button {
    display:inline-block;
    height:10px;
    width:10px;
    border-radius:10px;
    background-color:darkgray;
    -webkit-transition:background-color 0.25s;
    -moz-transition:background-color 0.25s;
    -o-transition:background-color 0.25s;
    -ms-transition:background-color 0.25s;
    transition:background-color 0.25s;
}


.button:hover {
    background-color:gray;
}

另外，请问有没有人知道为什么我在加载页面时点击下一张图片的按钮时，显示的图片没有过渡。缺乏过渡只发生在第一次点击时。

Answer 1

你需要在动画关键帧处做一些计算

例如，由于您有 2 张图片并且希望每张图片看 5 秒，而从一张幻灯片到另一张幻灯片应该持续 1 秒，因此您总共需要 12 秒。所以使用animation:scroller 12s;。

对于实际关键帧，每秒是动画的 100%/12 = 8.33%。

@keyframes scroller {
    0% {transform:translateX(0);}
    41.6% {transform:translateX(0);} /*wait from 0% to 41%, which is 5 seconds*/
    50% {transform:translateX(-800px);} /*slide for 1 second*/
    91.6% {transform:translateX(-800px);} /*wait 5 seconds*/
    100% {transform:translateX(0);} /* slide back for 1 second*/
}

---

.slideshowcontainer {
    width:800px;
    height:400px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    text-align:center;
    overflow:hidden;
    position:relative;
    top:30px;
    border-style:solid;
    border-width:10px;
    border-color:white;
    border-radius:15px;
}     


.imagecontainer {
    width:1600px;
    height:400px;
    clear:both;
    position:relative;            
    -webkit-transition:left 3s;
    -moz-transition:left 3s;
    -o-transition:left 3s;
-ms-transition:left 3s; 
    transition:left 3s;
animation:scroller 12s;
}


@keyframes scroller {
  	0% {transform:translateX(0);}
  	41.6% {transform:translateX(0);} /*41% of 12seconds is 5second*/
  	50% {transform:translateX(-800px);} /*slide for 1 second*/
  	91.6% {transform:translateX(-800px);} /*wait 5 seconds*/
    100% {transform:translateX(0);} /* slide back for 1 second*/
}


.slideshowimage {
    float:left;
    margin:0px;
    padding:0px;
    position:relative;
}

#slideshowimage-1:target ~ .imagecontainer {
    left:0px;
}


#slideshowimage-2:target ~ .imagecontainer {
    left:-800px;
}


.buttoncontainer {
    position:relative;
    top:-20px;
}


.button {
    display:inline-block;
    height:10px;
    width:10px;
    border-radius:10px;
    background-color:darkgray;
    -webkit-transition:background-color 0.25s;
    -moz-transition:background-color 0.25s;
    -o-transition:background-color 0.25s;
    -ms-transition:background-color 0.25s;
    transition:background-color 0.25s;
}


.button:hover {
    background-color:gray;
}

<div class="slideshowcontainer">
    <span id="slideshowimage-1"></span>
    <span id="slideshowimage-2"></span>
    <span id="slideshowimage-3"></span>
    <div class="imagecontainer">
        <img src="https://placehold.it/800x400" class="slideshowimage"     style="width:800px;height:400px;">
        <img src="https://placehold.it/800x400" class="slideshowimage"     style="width:800px;height:400px;">
    </div>
    <div class="buttoncontainer">
        <a href="#slideshowimage-1" class="button"></a>
        <a href="#slideshowimage-2" class="button"></a>
    </div>
    </div>

---

如果你想让自动幻灯片永远继续下去，那么使用animation:scroller 12s infinite;