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

9
votes

I'm trying to user css3 transitions to fade the opacity of an element (http://www.w3schools.com/cssref/css3_pr_transition-duration.asp).

For instance, I say:

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

Is there a way to specify a different "return to original state" time than the 2s?

I'd like to low the opacity in 2 seconds, but bring it back up in 0.5 seconds.

CSS3 Transition: Different transition for *IN* and *OUT* (or returning from transitioned state) seems to accomplish this but using multiple elements. Any better way?

1
csscss-transitions

1 Answers

15
votes

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

Just specify different transition-duration-s for normal and hovered state: 

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