Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 560
Garen Checkley Avatar asked Jul 10 '12 19:07

Garen Checkley


1 Answers

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;
}
like image 91
Zoltan Toth Avatar answered Oct 18 '22 16:10

Zoltan Toth