Html 使用CSS连续滚动3个图像

我是CSS新手，我被这段代码困住了。它向我显示了第一个图像，当我把鼠标放在上面时，它变为second.jpg，但第三个不起作用。我想把鼠标放在second.jpg上，几秒钟后换成third.jpg，几秒钟后再换成first.jpg，并在鼠标悬停时不断重复。 有人能帮我吗

#cf{
位置：相对位置；
高度：400px；
宽度：273px；
保证金：0自动；
}
#cf img{
位置：绝对位置；
左：0；
-webkit过渡：不透明度0.5s缓进缓出；
-moz过渡：不透明度0.5s缓进缓出；
-o型过渡：不透明度0.5s缓进缓出；
过渡：不透明度0.5s缓进缓出；
}
#cf img.top：悬停{
不透明度：0；
}

---

使用

转换无法连续旋转多个图像，因为转换只指定一次状态更改。因此，最多只能使用变换在图像中旋转一次

对于这个用例，您最好的选择是使用允许循环的CSS3动画。假设您有3个图像，并且每个图像在显示其下方的图像之前必须可见1s，则总的
动画持续时间应为
3s
。每个图像必须在1s的持续时间内从
opacity:1
变为
opacity:0
，因此动画关键帧的指定方式应确保在
33%
（因为33%的3s=1s）之前，图像的不透明度为1，在
33.1%
时，它会迅速变为0，并一直保持到结束

最上面的图像上的动画可以立即开始，但中间和底部的动画只能在它们上面的图像完成动画后开始。因此，中间的图像应该延迟1s，底部的图像应该延迟2s


#cf{
位置：相对位置；
高度：200px；
宽度：200px；
保证金：0自动；
}
#cf img{
位置：绝对位置；
左：0；
}
#cf：悬停式img{
动画：旋转3秒线性无限；
}
#cf：悬停图像：第n个类型（1）{
动画延迟：0s；
}
#cf：悬停图像：第n个类型（2）{
动画延迟：1s；
}
#cf：悬停图像：第n个类型（3）{
动画延迟：2s；
}
#cf img:n第（2）类，#cf img:n第（3）类{
不透明度：0；/*使其最初不可见*/
}
@关键帧向内向外旋转{
0.1%, 33% {
不透明度：1；
}
33.1%, 100% {
不透明度：0；
}
}