CSS3 transition-duration/delay對於顏色屬性不起作用，其他所有工作都在工作

使用CSS3「過渡」。奇怪的是，我可以成功地操縱頂部和背景色值，時間和延遲。我也可以操縱顏色值。但是，我不能操縱持續時間或延遲對於顏色，無論我放在那裏的數字。CSS3 transition-duration/delay對於顏色屬性不起作用，其他所有工作都在工作

代碼如下。這裏的結果是，頂部和背景色完成它們的變化超過1s，和顏色立即變化（而不是超過0.5s與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; 
}

非常感謝您的幫助！

來源

2014-03-02 ELizzy

由於它是您想要更改的<strong>顏色，因此您需要將轉換添加到該元素而不是父項。 transition-property未被繼承，因此<strong>沒有轉換，因此顏色變化是即時的。

所以添加以下規則：

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

，並刪除部分從父，如果不再需要它。

See demo

來源

2014-03-02 13:58:04 andyb

CSS3 transition-duration/delay對於顏色屬性不起作用，其他所有工作都在工作

回答

相關問題