Alex Rivera | Logout

CSS transition ease-out not working

Asked 2013-01-23T20:28:03.377
14

Ok, so I don't understand why this doesn't ease out, only in: (for quick view, just paste it in http://htmledit.squarefree.com, for instance)

<style>
#over {
background: url(http://th01.deviantart.net/fs71/150/f/2013/005/0/6/dal_shabet__have__don_t_have_by_awesmatasticaly_cool-d5qkzu8.jpg);
height:150px;
width:150px;
}

#in {
background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg);
height:150px;
width:150px;
}

#in:hover {
opacity: 0;
transition: opacity .3s ease-in-out;
}

</style>

<div id="over">
<div id="in"></div
</div>
transition
Edit
Report

1 Answer

32

I'm not sure exactly what you're asking, but I think you are saying that the transition is only occurring in on a mouse over, and not when you mouse out (it just snaps back to the way it was before, instead of transitioning). You need to add your transition property to #in, rather than #in:hover. The transition is only occurring when your #in element is being hovered over. Move the css for the transition under #in and it will work on mouse over and mouse out. You want to leave your desired css for the hover state under #in:hover, in this case, the opacity change, but the actual transition css property will go under #in.

To make it a little more clear:

#in {
    background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg);
    height:150px;
    width:150px;
    transition: opacity .3s ease-in-out; /* add this here */
}

#in:hover {
    opacity:0;
    /* and we've removed it from here */
}

The thing to know is that ease-in-out has nothing to do with when it will transition. It may seem that way, that ease-in is on hover, and ease-out is on mouseout, but actually, ease-in-out means that it will ease in and out slowly, rather than something like ease-in, which eases into the transition slowly and then speeds up towards the end. It relates to the style of the transition itself, rather than when it will occur.

Maybe you already understood that, but based on your question it seems you were confused there.

answered 2013-02-19T23:32:27.447

Your Answer