如何使用HTML和CSS制作简单的计时器图像幻灯片

我正在尝试制作一个简单的计时器幻灯片。基本上，一个图像只在一定的时间内可见（比如说5秒钟），然后切换到另一个图像，然后重复。 我已经搜索过了，但似乎无法让它为我工作。 任何帮助都将是惊人的

这是我到目前为止试过的。我试着让两个图像淡入，但问题是它们没有重叠。一个在另一个之上，淡入淡出的动画可以工作，但它们都在同一时间淡出，而不是一个淡入另一个图像

<style>
@keyframes cf3FadeInOut {
0%  {opacity:1;}
45% {opacity:1;}
55% {opacity:0;}
100% {opacity:0;}
}

#cf {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
</style>

<div id="cf">
<img class="bottom" src="12289696_1526730367649084_3157113004361281453_n.jpg" />
<img class="top" src="11406788_1433347623654026_6824927253890240539_n.jpg" />
</div>

@关键帧cf3FadeInOut{
0%{不透明度：1；}
45%{不透明度：1；}
55%{不透明度：0；}
100%{不透明度：0；}
}
#碳纤维{
动画名称：cf3FadeInOut；
动画计时功能：轻松进出；
动画迭代次数：无限；
动画持续时间：10秒；
动画方向：交替；
}

对于HTML和CSS（不含javascript）可以使用动画css3属性。 例如，对于3张幻灯片：

HTML-首先声明要加载的img（用于平滑动画）

---

使用2个图像，您可以通过CSS动画以低成本完成一些事情：

@关键帧cf{
50%{/*在50%时，可避免交替模式*/
不透明度：0；
}
}
#cf{/*与图像大小相同*/
高度：300px；
宽度：200px；
保证金：自动；
}
#cf img{
位置：绝对；/*让我们堆叠它们*/
}
#参见顶部{
动画：cf 10s无限；/*让它永远运行*/
}

看一看CSS动画请提供一个迄今为止您尝试过的示例。KrisD我编辑了我的问题，并将我尝试使用的代码放入firefox中，背景图像+动画迄今为止从未使用过。你应该使用背景位置（当然是多个背景）；），此外，如果这是内容，它应该是html格式的，而不是bg格式的。op没有说：）对于bg，它可能是一个通过步骤（）运行的精灵。你介意我问一下三个关键帧之间的偏差有什么区别吗？我只是认为@keyframes是CSS3动画的一般规则。moz和web kit的关键帧是什么？@JaoJao这些过去是旧版本所需的供应商前缀，现在不再需要了，您可能不介意它们只是为了澄清，我必须使用http源映像？我正在创建自己的网站，而使用我的本地图片进行img src是不起作用的。这是一个愚蠢的问题。很抱歉，我有一个金发的时刻XD，但谢谢你，这正是我想要的！尽管还有最后一个问题。对于放置的绝对位置，动画效果良好。如果我想把图片放在网页的中心怎么办？而不是在right@JaoJao容器#cf在流中，边距：auto-will；）在水平方向上，否则flex也可以以低成本将X、Y置于该框的中心：例如，我正在使用Firefox。我不确定这是否是一个问题，因为它不是自动对齐到页面；-；。仍然是极右翼。（使用相同的图像尺寸）@JaoJao你在尝试什么代码？你有链接吗？我也用德法特的FF

<img class="for_load" src="http://lorempixel.com/400/200/">
<img class="for_load" src="http://lorempixel.com/400/201/">
<img class="for_load" src="http://lorempixel.com/400/202/">

body{
  background:no-repeat;
  -webkit-animation:animation 10s infinite;
  -moz-animation:animation 10s infinite;
  animation:animation 10s infinite;   
  -webkit-animation-timing-function:linear;
  -moz-animation-timing-function:linear;
  animation-timing-function:linear;
}
.for_load{
  width:1px;
  height:1px;
  position:absolute;
  left:-1px;
  top:-1Px;
}
@-moz-keyframes animation{
  0%{
    background-image:url(http://lorempixel.com/400/200/);
  }
  30%{
    background-image:url(http://lorempixel.com/400/200/);
  }
  33%{
    background-image:url(http://lorempixel.com/400/201/);
  }
  63%{
    background-image:url(http://lorempixel.com/400/201/);
  }
  66%{
    background-image:url(http://lorempixel.com/400/202/);
  }
  97%{
    background-image:url(http://lorempixel.com/400/202/);
  }
  100%{
    background-image:url(http://lorempixel.com/400/200/);
  }
}
@-webkit-keyframes animation{
  0%{
    background-image:url(http://lorempixel.com/400/200/);
  }
  30%{
    background-image:url(http://lorempixel.com/400/200/);
  }
  33%{
    background-image:url(http://lorempixel.com/400/201/);
  }
  63%{
    background-image:url(http://lorempixel.com/400/201/);
  }
  66%{
    background-image:url(http://lorempixel.com/400/202/);
  }
  97%{
    background-image:url(http://lorempixel.com/400/202/);
  }
  100%{
    background-image:url(http://lorempixel.com/400/200/);
  }
}
@keyframes animation{
  0%{
    background-image:url(http://lorempixel.com/400/200/);
  }
  30%{
    background-image:url(http://lorempixel.com/400/200/);
  }
  33%{
    background-image:url(http://lorempixel.com/400/201/);
  }
  63%{
    background-image:url(http://lorempixel.com/400/201/);
  }
  66%{
    background-image:url(http://lorempixel.com/400/202/);
  }
  97%{
    background-image:url(http://lorempixel.com/400/202/);
  }
  100%{
    background-image:url(http://lorempixel.com/400/200/);
  }
}