Html 如何自动播放此纯CSS3幻灯片？

更新：这里的问题是（请参阅当前CSS），一旦出现最后一个（第二个）图像，动画将立即返回到第一个图像，没有延迟。我希望第二个图像的动画同样延迟应用回第一个图像，而不是直接返回到第一个图像（在translationX（0））

我有一个幻灯片，如下代码所示：

.slideshowcontainer{
宽度：800px；
高度：400px；
左边距：自动；
右边距：自动；
边际上限：0px；
文本对齐：居中；
溢出：隐藏；
位置：相对位置；
顶部：30px；
边框样式：实心；
边框宽度：10px；
边框颜色：白色；
边界半径：15px；
}     
.imagecontainer{
宽度：1600px；
高度：400px；
明确：两者皆有；
位置：相对位置；
-webkit转换：左3；
-moz转换：左3s；
-o过渡：左3s；
-ms转换：左3s；
过渡：左3s；
动画：滚动16秒无限；
}
@关键帧滚动条{
0%{transform:translateX（0）；}
31.25%{转换：translateX（0）；}
50%{transform:translateX（-800px）；}
81.25%{transform:translateX（-800px）；}
100%{transform:translateX（0）；}
}
.幻灯片图像{
浮动：左；
边际：0px；
填充：0px；
位置：相对位置；
}
#slideshowimage-1:target~.imagecontainer{
左：0px；
}
#slideshowimage-2:target~.imagecontainer{
左：-800px；
}
.按钮容器{
位置：相对位置；
顶部：-20px；
}
.按钮{
显示：内联块；
高度：10px；
宽度：10px；
边界半径：10px；
背景色：暗灰色；
-webkit过渡：背景色0.25s；
-moz过渡：背景色0.25s；
-o过渡：背景色0.25s；
-ms转换：背景色0.25s；
过渡：背景色0.25s；
}
.按钮：悬停{
背景颜色：灰色；
}

您需要在动画关键帧处进行一些计算

例如，由于您有两张图像，并且希望每个图像都能看到5秒钟，并且从一张图像到另一张图像的幻灯片应该持续1秒钟，因此您总共需要12秒钟。所以使用

动画：滚动条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{
宽度：800px；
高度：400px；
左边距：自动；
右边距：自动；
边际上限：0px；
文本对齐：居中；
溢出：隐藏；
位置：相对位置；
顶部：30px；
边框样式：实心；
边框宽度：10px；
边框颜色：白色；
边界半径：15px；
}     
.imagecontainer{
宽度：1600px；
高度：400px；
明确：两者皆有；
位置：相对位置；
-webkit转换：左3；
-moz转换：左3s；
-o过渡：左3s；
-ms转换：左3s；
过渡：左3s；
动画：滚动条12s；
}
@关键帧滚动条{
0%{transform:translateX（0）；}
41.6%{transform:translateX（0）；}/*41%的12秒是5秒*/
50%{transform:translateX（-800px）；}/*滑动1秒*/
91.6%{transform:translateX（-800px）；}/*等待5秒*/
100%{transform:translateX（0）；}/*向后滑动1秒*/
}
.幻灯片图像{
浮动：左；
边际：0px；
填充：0px；
位置：相对位置；
}
#slideshowimage-1:target~.imagecontainer{
左：0px；
}
#slideshowimage-2:target~.imagecontainer{
左：-800px；
}
.按钮容器{
位置：相对位置；
顶部：-20px；
}
.按钮{
显示：内联块；
高度：10px；
宽度：10px；
边界半径：10px；
背景色：暗灰色；
-webkit过渡：背景色0.25s；
-moz过渡：背景色0.25s；
-o过渡：背景色0.25s；
-ms转换：背景色0.25s；
过渡：背景色0.25s；
}
.按钮：悬停{
背景颜色：灰色；
}

saw no difference是什么意思？@AllDani.com 3秒钟后什么也没发生。jQuery对于幻灯片来说非常好有一个纯css版本，你可以使用它：@s0rfi949不错，但我的问题是，一旦到达最后一个（第二个）图像，它会立即返回到第一个图像，不会有时间延迟。Muchas gracias senor。