alla ricerca di indizio, come utilizzare l'opacità nel colore di sfondo con la transizione?opacità di transizione css del colore di sfondo
Sto usando la funzione rgba()
, ma la transizione non funziona su hover.
.bx{
background:rgba(255,0,0,0.5);
width:100px; height:100px;
position:relative;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
.bx:hover{
background:rgba(255,0,0,1);
}
.t{
position:absolute;
bottom:0px;
}
HTML
<div class="bx"><div class="t">text</div></div>
Qualsiasi idea, come posso utilizzare transizione per .bx
?
concordato. L'opacità non è stata alterata, quindi la transizione non sarebbe stata allegata ad essa. – Coop
TIL; Vale la pena notare che animare lo sfondo è molto più costoso che animare l'opacità (in quanto provoca riduzioni). Notevole quando hai molti elementi che si animano contemporaneamente o su dispositivi a bassa potenza! – lukejacksonn