每个IMG上具有不同链接的自动多图像切换

Question

背景

找到使用CSS的改进方法，我遇到了使用图像过渡以获得良好效果的主张。 经过几次失误之后，我在一些参考资料的帮助下成功完成了这项工作，以便在悬停中实现平滑过渡。 现在我想要它是自动的，每张图片都有链接，但我对代码感到茫然。

当前的JSFiddle：

没有，JSFIDDLE不接受IMG而我无法在那里展示。

<div class="container">
  <img src="sky.jpg">
  <img class="front" src="bear.jpg">
</div>

.container
{
  position:relative;
  height:500px;
  width:500px;
  margin:0 auto;
}

.container img
{
  position:absolute;
  transition: opacity 1s ease-in-out;
}

.container img.front:hover
{
  opacity:0;
}

问题：

这个HTML-CSS适用于悬停时的单个图像切换（2个图像），而不是自动的多个图像切换。

需要：

代码更改，允许多个交换机仅使用CSS和HTML，每个图像上有不同的链接。 我知道JQUERY和JAVACRIPT有可能，我希望没有这两个解决方案。

解决方案代码限制和参数：

• No JQUERY和JAVASCRIPT
• 多种浏览器兼容性（不一定非常旧）
• 每个图像开关中有多个链接的可能性

非常感谢您提供的所有帮助。

Answer 1

试试这个你必须轻微移动光标（稍微摇晃一下）以查看链接中的更改，注意链接中的更改http://jsfiddle.net/fc3nb5rL/1/

我使用z-index代替不透明度

.back {
z-index:1;
 }
@-webkit-keyframes anim {
from {
    z-index:1;
}
to {
    z-index:-2;
}
}
.back:hover {
-webkit-animation:anim 5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes anim2 {
from {
    z-index:1;
}
to {
    z-index:-2;
}
 }

.front:hover{
-webkit-animation:anim2 5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
}