如何自动播放这个纯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*/
}

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果您希望autslide永远持续下去，请使用animation:scroller 12s infinite;