Different css3 transition time for state "in" and "return"

Question

I am trying to go to the css3 transitions of the user in order to fade the opacity of the element ( http://www.w3schools.com/cssref/css3_pr_transition-duration.asp ).

For example, I say:

-webkit-transition: opacity 2s ease-in-out; 

Is there a way to specify a different reset time than 2s?

I would like to reduce the opacity in 2 seconds, but return it in 0.5 seconds.

CSS3 Transition: To go to * IN * and * OUT * (or return from a transitioned state) , it seems to do this, but using a few elements. Any better way?

Answer 1

Yes, there is a better way - http://jsfiddle.net/bJKpu/

Just specify different transition-duration -s for the normal and hovering states:

 div { height: 200px; width: 200px; background: orange; opacity: .5; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; } div:hover { opacity: 1; height: 300px; width: 300px; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; }