Różne czasy przejścia css3 dla stanu "do" i "powrotu"

Question

Próbuję przejść użytkownika css3, aby zaniknąć nieprzezroczystość elementu (http://www.w3schools.com/cssref/css3_pr_transition-duration.asp).

Na przykład, mówię:

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

Czy istnieje sposób, aby określić inną „powrotu do pierwotnego stanu” czasu niż 2s?

Chciałbym zmniejszyć krycie w 2 sekundy, ale przywrócić go w 0,5 sekundy.

CSS3 Transition: Different transition for *IN* and *OUT* (or returning from transitioned state) wydaje się to osiągnąć, ale przy użyciu wielu elementów. Lepszy sposób?

Answer 1

Tak, istnieje lepszy sposób - http://jsfiddle.net/bJKpu/

Wystarczy określić różne transition-duration -s do normalnego stanu i oscylował:

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