CSS Webkit Transizione - Fade out lentamente che Fade in

Question

Questo è quello che ho:

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

.box:hover{ 
    background:#000; 
} 

Ma questo aggiunge ad entrambi onmouseover e onmouseout azioni, ma non c'è un modo per controllarli ? Qualcosa di simile:

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

Answer 1

Basta ridefinire la transizione nell'elemento pseudo sopra.

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

Consulta il mio http://jsfiddle.net/DoubleYo/nY8U8/

Answer 2

O utilizzare un animation (solo in WebKit attualmente), oppure utilizzare JS per aggiungere e rimuovere le proprietà, avranno ancora animare.