Different css3 transition time for "into" and "return" state
css, css-transitions
Solution
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;
}
Problem
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?