Thời gian chuyển tiếp css3 khác nhau cho trạng thái "thành" và "trả lại"

Question

Tôi đang cố gắng chuyển đổi css3 để làm mờ độ mờ của phần tử (http://www.w3schools.com/cssref/css3_pr_transition-duration.asp).

Ví dụ, tôi nói:

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

Có cách nào để xác định một khác nhau "trở lại ban đầu nhà nước" thời gian hơn 2s?

Tôi muốn giảm độ mờ trong 2 giây, nhưng sao lưu lại trong 0,5 giây.

CSS3 Transition: Different transition for *IN* and *OUT* (or returning from transitioned state) dường như thực hiện điều này nhưng sử dụng nhiều yếu tố. Có cách nào tốt hơn không?

Answer 1

Vâng, có một cách tốt hơn - http://jsfiddle.net/bJKpu/

Chỉ cần chỉ định transition-duration -s khác nhau cho bình thường và bay lượn nhà nước:

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