Can I Apply A CSS Transition On Hover-out Only?

Answer :

Here's one way to achieve this (put a bogus property none for transition property in :hover):

#inner2{     opacity:0;     transition:opacity 2000ms; } #outer:hover #inner2{     opacity:1;     transition:none; } 

http://jsfiddle.net/j716sbav/4/

Answer updated to incorporate @BoltClock's suggestion. Putting none instead of a bogus property is definitely more elegant.

If you prefer not to specify the transition property more than once, you can apply the transition to :not(:hover), but the caveat is that you need to swap all of the other declarations as well:

#inner2{     opacity:1; } #outer:not(:hover) #inner2{     opacity:0;     transition:opacity 2000ms; } 

Either of these will work, but if you don't want to deal with confusing inversions, stick with overriding via transition: none.

Also note that CSS selectors represent states and not events, which means that it utilizes a :hover state rather than mouseover and mouseout events; however, a transition from :hover to :not(:hover) is essentially the CSS way of expressing a mouseout animation.