CSS过渡的缓入似乎不起作用

Question

I have a simple overlay of text over an image, darkening the background in the process. I used transition with ease-in-out , but it doesn't seem to ease out properly.

I know that the ease-in-out should be applied to the thing itself, and not its pseudo of :hover , but it doesn't seem to want to work. I have tried many ways, moving it around, deleting stuff, adding stuff, but nothing seems to make sense. I notice the text do ease out fine, but the background with rgba opacity doesn't co-operate. It just snaps back :(

Do refer to a live version at http://g4stly.com/staff.html to know what I'm talking about, specifically.

Thanks in advance!

My code is as follows:

 #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: opacity 300ms ease-in-out; } .textFrame pa { 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> 

Answer 1

I noticed you updated the code. Looks like your issue has already been solved.

The .textFrame p was only applying transition for opacity , so you couldn't see the background transition. I seed you added background .... to the transition, you could also do:

transition: all 1000ms ease-in-out;

Another option would be to move the rgba background to inside the .textFrame p , so the background wouldn't suddenly disappear, fading out along with the rest of the element.

Hopefully this helps you understand the cause :)

Answer 2

You had a comma where there should have been a semicolon.

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 pa { 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>