CSS Webkit Transición - Desaparición gradual lentamente que Fundido de

Question

Esto es lo que tengo:

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

.box:hover{ 
    background:#000; 
} 

Pero esto añade a ambos onmouseover y onmouseout acciones, pero no hay una manera de controlarlos ? Algo así como:

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

Answer 1

Simplemente vuelva a marcar su transición en el elemento pseudo excesivo.

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

Consulta mi http://jsfiddle.net/DoubleYo/nY8U8/

Answer 2

O bien utilizar un animation (sólo en webkit actualmente), o utilizar JS para agregar y quitar las propiedades, todavía tendrán animar.