Html 如何显示前三个徽标等待几秒钟，然后以无限循环显示下三个徽标？

到目前为止，我有9个徽标，并且我正在按列表顺序显示该徽标。现在我要做的是，我必须显示前3个徽标并等待几秒钟，然后隐藏这3个徽标并再次显示下3个徽标等待几秒钟，然后显示下3个徽标。我需要这个

例如：

On the page load display first 3 logo

1 2 3

//wait for the second

1 2 3   // hide this
4 5 6   // display this
7 8 9   // hide this

//wait for second  
1 2 3   // hide this
4 5 6   // hide this
7 8 9   // display this

// wait for second
1 2 3   // display this
4 5 6   // hide this
7 8 9   // hide this

I need infinite.

我试过这个代码，但不起作用

ul{
列表样式：无；
宽度：100%；
位置：相对位置；
}
ulli{
显示：内联块；
宽度：33%；
动画迭代次数：无限；
动画计时功能：轻松进出；
不透明度：0；
动画名称：fadeIn；
}
ulliimg{
宽度：250px；
}
/*动画徽标*/
@关键帧淡入淡出{
0% {
不透明度：0；
}
6% {
不透明度：1；
}
27% {
不透明度：1；
}
33% {
不透明度：0；
}
}
.row--动画li:n类型（-n+3）{
动画持续时间：4s；
}
.行--动画li:n第n个孩子（4），
.行--动画li:n第n个孩子（5），
.行--动画li:第n个孩子（6）{
动画持续时间：6s；
}
.row--动画li:n最后一个孩子（-n+3）{
动画持续时间：8秒；
/*位置：绝对位置*/
}

更新：这段代码是我认为您想要的，请注意，我稍微更改了HTML，以便可以操纵元素大小和显示，仅使用CSS3实现，深受以下启发：

滑块{
宽度：900px；
保证金：0自动；
}
.幻灯片{
位置：绝对位置；
显示：网格；
网格模板列：自动；
栅隙：10px；
}
.幻灯片图像{
宽度：100；
高度：自动；
}
.幻灯片1{
动画：淡入8秒无限；
-webkit动画：淡入8秒无限；
}
.幻灯片2{
动画：fade2 8s无限；
-webkit动画：fade2 8s无限；
}
.幻灯片3{
动画：fade3 8s无限；
-webkit动画：fade3 8s无限；
}
@关键帧淡入淡出{
0% {
不透明度：1；
}
33.333% {
不透明度：0；
}
66.666% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@关键帧淡入淡出2{
0% {
不透明度：0；
}
33.333% {
不透明度：1；
}
66.666% {
不透明度：0；
}
100% {
不透明度：0；
}
}
@关键帧fade3{
0% {
不透明度：0；
}
33.333% {
不透明度：0；
}
66.666% {
不透明度：1；
}
100% {
不透明度：0；
}
}

文件

您可以使用“显示网格”强制将元素显示在一行中

您可以使用动画的属性来获得此效果，但所有元素的动画持续时间应相同；从一个到另一个的变化是延迟，使其处于动画的不同阶段：

ul{
列表样式：无；
宽度：100%；
位置：相对位置；
显示：网格；
}
ulli{
显示：内联块；
宽度：30%；
不透明度：0.2；
动画：fadeInSlow缓进缓出6秒无限；
背景颜色：蓝色；
高度：50px；
网格行：1；
}
@关键帧淡入淡出{
0% {
不透明度：0；
}
6% {
不透明度：1；
}
27% {
不透明度：1；
}
33% {
不透明度：0；
}
}
@关键帧淡入淡出{
0% {
不透明度：0；
}
12% {
不透明度：1；
}
21% {
不透明度：1；
}
33%, 100% {
不透明度：0；
}
}
李：第n个孩子（4），
李：第n个孩子（5岁），
李：第n个孩子（6）{
动画延迟：-4s；
}
李：第n个孩子（7岁），
李：第n个孩子（8岁），
李：第n个孩子（9）{
动画延迟：-2s；
}
李：第n个孩子（3n+1）{
网格柱：1；
}
李：第n个孩子（3n+2）{
网格柱：2；
}
李：第n个孩子（3n+3）{
网格柱：3；
}

一,
二,
三,
四,
五,
六,
七,
八,
九,

您是否正在寻找CSS专用解决方案？可以使用javascript/jQuery吗？@ROOT，你能帮我使用jQuery吗？是的，我现在一定会检查。@Neren，对不起，我的朋友，我有急事，我不能处理它@ROOT，没问题，我会等待你的答复。保持安全保持健康。谢谢你的回答。我检查了片段。它起作用了。是否可以在同一位置显示所有徽标？我的意思是现在它正在下面显示。我试过位置：绝对；到li，但它不工作。是的，我们可以使用

display:none而不是单独使用不透明度。让我检查一下我是否能做到。@NarenVerma，这是一个有点棘手的问题，我只是想问你是否想要这样的东西，那么为什么不使用滑块库？@NarenVerma，我可以使用CSS实现这一点，但我真的建议使用CSS滑块库。嗨@ROOT，你的答案也有效，但我从VAL找到了最好的答案。从我这边向上投票。我怎样才能控制fadein的速度？现在它运行得非常快，可以更改关键帧中的百分比。我添加了另一个关键帧集，可以使速度变慢。抱歉，我检查了您更新的答案。它几乎一直工作到9点，但9点之后，当它从1开始时，我会得到一些白色背景或光不透明度。你可以查看这张图片，我相信它现在已经解决了。我已经为100%的位置添加了一个关键帧是的，它在perflect工作。谢谢你的帮助。投我一票