CSS Webkit Transition - Zanikanie wolniej niż w

Question

Fade To jest to, co mam:

.box{ 
    background:#FFF; 
    -webkit-transition: background 0.5s; 
} 

.box:hover{ 
    background:#000; 
} 

Ale to dołącza się zarówno onmouseover i onMouseOut działań, ale nie jest jakiś sposób, aby je kontrolować ? Coś jak:

-wekbkit-transition-IN: background 1s; 
-webkit-transition-OUT: background 10s; 

Answer 1

Wystarczy zmienić kolejność przejścia w ponad pseudoelement.

.box{ 
    background: white; 
    -webkit-transition: background 5s; 
} 
.box:hover{ 
    background: olive; 
    -webkit-transition: background 1s; 
} 

Spójrz mój http://jsfiddle.net/DoubleYo/nY8U8/

Answer 2

Albo użyć animation (obecnie tylko w WebKit), lub użyć JS, aby dodać i usunąć właściwości, będą one nadal animować.