CSS3 过渡持续时间/延迟不适用于颜色属性，所有其他工作

Question

使用 CSS3“过渡”。奇怪的是，我可以成功地操纵top 和background-color values、duration 和delay。我还可以操纵颜色 值。但是，无论我在其中输入什么数字，我都无法为color 操纵duration 或delay。

代码如下。这里的结果是 top 和 background-color 在 1s 内完成了它们的变化，并且 color 立即变化(而不是超过 0.5s 延迟 1s ).

HTML:

<div class="episode">
    <span class="vidsliderprep"></span>
    <span class="vidslider">
            <strong>TITLE</strong>
    Description.</span>
</div>

CSS:

.vidslider {
    display: block;
    position: absolute;
        top: 108px;
        left: 0;
        width: 100%;
        height: 120px;
    background-color: rgba( 51, 51, 51, 0.4);
    font-family: 'Gafata', sans-serif;
        font-size: 15px;
        color: #FFF;
        text-shadow: 1px 1px 0px #000;
    padding: 0 10px;
    transition: top 1s ease, background-color 1s ease, color 0.5s ease 1s;
    z-index: 99;
}

.vidsliderprep:hover + .vidslider {
    top: 30px;
    background-color: rgba(51, 51, 51, 0.8);
}

.vidslider strong {
    display: block;
    font-size: 16px;
        font-weight: bold;
}

.vidsliderprep:hover + .vidslider strong {
    color: #F60;
}

非常感谢您的帮助!

Answer 1

因为它是<strong>您希望更改的颜色，您需要将过渡添加到该元素而不是父元素。 transition-property 不被继承，所以 <strong>没有过渡，因此颜色变化是即时的。

所以添加如下规则:

.vidslider strong {
    transition: color 0.5s ease 1s;
}

如果不再需要，则从父级中删除该部分。

See demo