CSS的過渡緩出似乎不起作用

我在圖像上有一個簡單的文本疊加，使背景變暗。我用transition與ease-in-out，但它似乎沒有妥善解決。CSS的過渡緩出似乎不起作用

我知道ease-in-out應該應用於事物本身，而不是它的僞:hover，但它似乎並不想工作。我嘗試了很多方法，移動它，刪除東西，添加東西，但似乎沒有任何意義。我注意到文字做得很好，但background與rgba不透明不合作。它只是扣回:(

可做參考的真人版在http://g4stly.com/staff.html知道我在說什麼，特別是

在此先感謝

我的代碼如下：！

#g4stly 
 
\t \t \t { 
 
\t \t \t background-image: url('http://g4stly.com/images/users/g4stly.jpg'); 
 
\t \t \t } 
 

 
.textFrame 
 
\t \t \t { 
 
\t \t \t text-align: center; 
 
\t \t \t font-size: 20px; 
 
\t \t \t color: #DDAA49; 
 
\t \t \t text-decoration: none; 
 
\t \t \t background-repeat: no-repeat; 
 
\t \t \t background-size: cover; 
 
\t \t \t border-radius: 30%; 
 
\t \t \t width: 250px; 
 
\t \t \t height: 250px; 
 
\t \t \t } 
 
\t \t \t 
 
.textFrame p 
 
\t \t \t { 
 
\t \t \t opacity: 0; 
 
\t \t \t height: 75%; 
 
\t \t \t margin: 0; 
 
\t \t \t border-radius: 30%; 
 
    \t \t transition: opacity 300ms ease-in-out; 
 
\t \t \t } 
 
\t \t \t 
 
.textFrame p a 
 
\t \t \t { 
 
\t \t \t text-decoration: none; 
 
\t \t \t color: #976649; 
 
\t \t \t font-size: 25px; 
 
\t \t \t } 
 
\t \t \t 
 
.textFrame:hover p 
 
\t \t \t { 
 
\t \t \t opacity: 1; 
 
\t \t \t background: rgba(0,0,0,0.8); 
 
\t \t \t } 
 
\t \t \t 
 
.textFrame p:first-child 
 
\t \t \t { 
 
\t \t \t padding: 25% 0 0 0; 
 
\t \t \t }

<div id="g4stly" class="textFrame textFrameLeft"> 
 
\t \t <p><a href="http://steamcommunity.com/profiles/76561198068338533/" target="_blank">g4stly</a><br><br> 
 
\t \t Owner of everything g4stly related<br> 
 
\t \t Basically, the boss.</p> 
 
\t </div>

來源

2017-08-15 Mark

我注意到你更新的代碼。看起來你的問題已經b een解決了。

.textFrame p只適用於opacity的轉換，因此您看不到背景轉換。我種子您添加background ....的過渡，你也可以這樣做：

transition: all 1000ms ease-in-out;

另一種選擇是將rgba背景移到.textFrame p裏面，這樣的背景也不會突然消失，隨着淡出元素的其餘部分。

希望這有助於你理解的原因:)

來源

2017-08-15 18:14:15

正要說這個:) – crazymatt

是啊，我發現自己違揹我自己的想法很多在這個網站，這是令人沮喪的嚴重一倍。我想知道出了什麼問題，我嘗試了很多東西，閱讀了很多東西，沒有任何工作，只是意識到這是一個簡單的問題。只有當我發佈這個問題，我實際上重讀了這一行，並且閱讀「不透明」一詞時，我才意識到我有多愚蠢，我並沒有意識到它隻影響了不透明性。我在另一個轉換中添加了第二行，這使它完全不起作用。 – Mark

然後，一個快速的谷歌搜索告訴我使用逗號，並添加下一個轉換，作爲第二個轉換語句破壞他們兩個。我覺得啞巴D： – Mark

你有一個逗號那裏應該是一個分號。

transition: background 1000ms ease-in-out;

#g4stly { 
 
    background-image: url('http://g4stly.com/images/users/g4stly.jpg'); 
 
} 
 

 
.textFrame { 
 
    text-align: center; 
 
    font-size: 20px; 
 
    color: #DDAA49; 
 
    text-decoration: none; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    border-radius: 30%; 
 
    width: 250px; 
 
    height: 250px; 
 
} 
 

 
.textFrame p { 
 
    opacity: 0; 
 
    height: 75%; 
 
    margin: 0; 
 
    border-radius: 30%; 
 
    transition: background 1000ms ease-in-out; 
 
    transition: opacity 1000ms ease-in-out; 
 
} 
 

 
.textFrame p a { 
 
    text-decoration: none; 
 
    color: #976649; 
 
    font-size: 25px; 
 
} 
 

 
.textFrame:hover p { 
 
    opacity: 1; 
 
    background: rgba(0, 0, 0, 0.8); 
 
} 
 

 
.textFrame p:first-child { 
 
    padding: 25% 0 0 0; 
 
}

<div id="g4stly" class="textFrame textFrameLeft"> 
 
    <p><a href="http://steamcommunity.com/profiles/76561198068338533/" target="_blank">g4stly</a><br><br> Owner of everything g4stly related<br> Basically, the boss.</p> 
 
</div>

來源

2017-08-15 18:24:03

CSS的過渡緩出似乎不起作用

回答

相關問題