在 span 上延迟 1.0 不透明度，即使 parent div 已经有 1.0 不透明度？

Question

我意识到这可能没有 javascript 之外的解决方案，但也许有人可以想出一种方法来使用纯 css 来做到这一点。

我有一个 parent div 和 child:

<div class="parent">
    Text Text Text Text <span class = "delay">TEXT</span></div>
</div>

CSS

.parent{
    opacity: 0.0;
    -webkit-transition:all;
    -moz-transition:all;
    -o-transition: all;
    transition: all;
    transition-duration: .5s;
}
.delay{
    -webkit-transition:all;
    -moz-transition:all;
    -o-transition: all;
    transition: all;
    transition-duration: 1s; //make this one take .5 seconds longer to show!
}

Answer 1

使用transition-delay:

transition-delay: 0.5s

示例：

.parent,
.parent .child {
    opacity: 0;
    transition: 0.5s opacity linear;
}
.parent .child {
    transition-delay: 0.5s;
}
body:hover .parent,
body:hover .parent .child {
    opacity: 1;
}
/* Extra to show you where to hover over */
body {
    border: 1px solid #666;
}
body:before {
    content: 'Hover here';
}

<div class="parent">
    Text Text Text Text <span class="child">TEXT</span>
</div>

在 span 上延迟 1.0 不透明度，即使 parent div 已经有 1.0 不透明度？

Delay 1.0 opacity on span, even though parent div has already 1.0 opacity?

html

css

opacity