Retraso mouseout/hover con transiciones CSS3

Question

Tengo una caja que cambia de tamaño cuando se coloca. Sin embargo, me gustaría retrasar la etapa de mouseout, para que la caja mantenga el nuevo tamaño durante unos segundos, antes de recuperar el tamaño anterior.

div { 
    width: 70px; 
    -webkit-transition: .5s all;  
} 

div:hover { 
    width:130px; 
} 

¿Esto es posible hacerlo SIN Javascript y solo con CSS3? Solo me tiene que importar apoyar webkit.

Answer 1

div { 
    width: 70px; 
    -webkit-transition: .5s all; 
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all; 
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all; 
    -ms-transition-delay: 5s; 
    -o-transition: .5s all; 
    -o-transition-delay: 5s; 
    transition: .5s all; 
    transition-delay: 5s; 
} 

div:hover { 
    width:130px; 
    -webkit-transition-delay: 0s; 
    -moz-transition-delay: 0s; 
    -ms-transition-delay: 0s; 
    -o-transition-delay: 0s; 
    transition-delay: 0s; 
} 

Esto disparará el estado de mouseover de inmediato, pero espere 5 segundos hasta que se active el mouseout.

Fiddle

Answer 2

transición puede ser declarado como

transition: .5s all 5s 

(taquigrafía, el primer número es la duración, el segundo número es el retraso) entonces usted no necesita la transición de retardo separada

lo siento, no puedo agregar como comentario ya que no tengo suficientes puntos