延迟 CSS 次转换

Question

我有 2 张图像彼此重叠，绝对定位，在我的示例中它们是方形的，但在我的真实项目中它们是 png，边界有一些透明度，因此需要隐藏后面的图像直到它悬停时出现。

我的问题是我需要转换有某种延迟，以便背面图片出现在顶部图片之前一点，这样您就看不到中间的背景。我做了一个 fiddle 来说明这一点： http://jsfiddle.net/L21sk0oh/

你可以清楚地看到背景中的红色，这是不应该发生的。还有一些奇怪的动作在进行，我在实际项目中没有注意到这一点。

还有我的HTML:

<div class="product1">
    <img class="active" src="http://lorempixel.com/400/200/sports" alt="">
    <img class="inactive" src="http://lorempixel.com/400/200/" alt="">
</div>

还有我的css：

body{
    background: red;
}
.product1{
  position: relative;
    width: 400px;
    height: 200px;
}

img{
  position: absolute;
  top:0;
  left:0;
}

.product1 img.active{
  transition: all 1s ease-in-out;
  opacity: 1;
}

.product1 img.inactive{
  transition: all 1s ease-in-out;
  opacity: 0;
}

.product1:hover img.active{
  opacity: 0;
}

.product1:hover img.inactive{
  opacity: 1;
}

Answer 1

您可以为 transition-delay property 指定一个值。

在这种情况下，我在 .product1 img.active 的过渡 shorthand 中添加了 1s 延迟：

Updated Example

.product1 img.active {
  transition: all 1s 1s ease-in-out;
  opacity: 1;
}

以上等同于：

.product1 img.active{
  transition: all 1s ease-in-out;
  transition-delay: 1s;
  opacity: 1;
}

确保您以正确的顺序添加 transition shorthand properties。

延迟 CSS 次转换

Delay in CSS transitions

html

css

css-transitions