Diferente tiempo de transición css3 para estado "en" y "retorno"

Question

Estoy tratando de usar transiciones css3 para atenuar la opacidad de un elemento (http://www.w3schools.com/cssref/css3_pr_transition-duration.asp).

Por ejemplo, digo:

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

¿Hay una manera de especificar un "retorno al estado original" diferente tiempo que los 2s?

Me gustaría reducir la opacidad en 2 segundos, pero volver a subirla en 0,5 segundos.

CSS3 Transition: Different transition for *IN* and *OUT* (or returning from transitioned state) parece lograr esto pero utilizando varios elementos. ¿Alguna mejor manera?

Answer 1

Sí, hay una manera mejor - http://jsfiddle.net/bJKpu/

Sólo especifique diferentes transition-duration -s de lo normal y permaneció Estado:

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