animate - Retrasar mouseout/hover con transiciones CSS3

transition css hover

Question

Tengo una caja que cambia de tamaño cuando se desplaza. Sin embargo, me gustaría retrasar la fase 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;
}

¿Se puede hacer esto SIN Javascript y solo CSS3? Sólo tengo que preocuparme por el soporte de webkit .

Answer 1

la transición puede ser declarada como

transition: .5s all 5s

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

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

Answer 2

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 activará el estado de mouseover de inmediato, pero espere 5 segundos hasta que se active el mouseout.

Fiddle