CSS3转换持续时间/延迟不适用于color属性，所有其他工作

Question

使用CSS3“过渡”。奇怪的是，我可以成功操纵顶部和背景颜色 值，持续时间和延迟< / em>的。我还可以操纵颜色 值。但是，我无法操纵持续时间或延迟 颜色，无论我放在那里的数字。

代码如下。结果是顶部和背景颜色完成超过1秒的更改，颜色立即更改（而不是超过0.5秒，延迟时间为1秒） ）。

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