如何自动播放此纯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;