如何通過CSS過渡淡出（管理淡入，但不明白如何淡出沒有「Webkit」）

我試過尋找這個，但找不到它。我創建了一個類，當它懸停在pararaph元素上時，可以放大並減少不透明度。我在（.5s）上使用了一個轉換。這工作得很好。但是我看過（我看過一個視頻），你可以在懸停後創建一個轉換。我一直在嘗試使用：如何通過CSS過渡淡出（管理淡入，但不明白如何淡出沒有「Webkit」）

image:hover:after p { 
    transition: .5s; 
}

但它不工作。我不明白這些webkit選項。我沒有使用過webkit就已經看到了這一點。基本上，沒有webkit可能嗎？或者是我的想象力？

如果webkit是唯一的方式有人可以鏈接我一些了不起的教程。

這是我目前在我的樣式表：

.image p { 
    color: black; 
    font-weight: bold; 
    background: rgba(235, 229, 235, .3); 
} 


.image:hover p { 
    background: rgba(235, 229, 235, .9); 
    transition: 0.5s; 
    font-size: 110%; 
}

感謝，

盧克

來源

2017-05-04 Luke Bennett

也許你在這裏混淆的東西。你的意思是在「一旦懸停效應結束後」及時的「後」，或者你真的在談論僞元素'：after'是一個html組件？ –

添加此

.image p { 
    transition: .5s ease-out 
}

來源

2017-05-04 11:57:55 Nathan

完美！那已經做到了！簡單而簡單！非常感謝！很高興我問。希望我能給你多個像！ –

嘗試transition財產轉移到正常的選擇不是懸停;否則，過渡效果將只適用於當您未被m掉時盤起 ..

例如，

.image p { 
    color: black; 
    font-weight: bold; 
    background: rgba(235, 229, 235, .3); 
    transition: 0.5s; 
} 


.image:hover p { 
    background: rgba(235, 229, 235, .9); 
    font-size: 110%; 
}

來源

2017-05-04 11:55:32 Paul

.image p a { 
 
    -webkit-transition: all 2s ease-in-out; 
 
    -moz-transition: all 2s ease-in-out; 
 
    -ms-transition: all 2s ease-in-out; 
 
    -o-transition: all 2s ease-in-out; 
 
    transition: all 2s ease-in-out; 
 
} 
 
.image p a:hover { 
 
    -webkit-opacity: 0.25; 
 
    -moz-opacity: 0.25; 
 
    opacity: 0.25; 
 
}

<div class="image"> 
 
    <p><a>fade in fade out effect on hover element</a> </p> 
 
</div>

來源

2017-05-04 12:06:15

使用css3過渡效果並使用不透明度淡化元素 –

如何通過CSS過渡淡出（管理淡入，但不明白如何淡出沒有「Webkit」）

回答

相關問題