CSS淡出多个图像.延迟不透明度转换.Webkit转换延迟

我正在尝试淡入堆叠在一起的3个图像。只使用CSS转换。

这是我的代码笔：

http://codepen.io/FredHair/pen/MYQZJv?editors=110

我已经设法淡入第一个图像，但不确定如何正确延迟和淡入第三个图像。

我在这里发现了很多类似的问题，但没有一个能帮助我破译实现这一目标所需的确切代码。

我的代码：

HTML

<body>
 <div id="fadeImage">
<img id="image1" src="http://testdigits.com/wp-   content/uploads/2015/02/OpacAnimFrame1.png" alt="OpacAnimFrame1" >
<img id="image2" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame2.png" alt="OpacAnimFrame2" >
<img id="image3" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame3.png" alt="OpacAnimFrame3" >
</div>

CSS

#image1{
position: absolute;
left: 200px;
z-index: 3;
}
#image2{
 position: absolute;
 left: 200px;
z-index: 2;
}
#image3{
position: absolute;
left: 200px;
z-index: 1;
}
#image1:hover{
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
opacity: 0;
transition-delay:1s;
}
#image2:hover {
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
opacity: 0;
transition-delay:3s;
}
}

我想最好只使用CSS来实现这一点，但如果你知道一个简单的jQuery修复程序，我也希望看到它。

感谢的帮助

MrB

您需要在#fadeImage上设置:hover，而不是单独的图像。这是我的解决方案：

#fadeImage {
  position: relative;
}
#fadeImage img {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 1;
  transition: opacity 1s linear;
}
#image1 {
  z-index: 3;
}
#image2 {
  z-index: 2;
}
#image3 {
  z-index: 1;
}
#fadeImage:hover #image1 {
  opacity: 0;
}
#fadeImage:hover #image2 {
  opacity: 0;
  transition-delay: 3s;
}

<div id="fadeImage">
  <img id="image1" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame1.png" alt="OpacAnimFrame1" >
  <img id="image2" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame2.png" alt="OpacAnimFrame2" >
  <img id="image3" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame3.png" alt="OpacAnimFrame3" >
</div>

相关内容

最新更新

热门标签：