Mark Mark -3 years ago 109
CSS Question

CSS's transition's ease-in-out doesn't seem to work

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




Answer Source

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 :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download