Ritarda il mouseout/passa il mouse con le transizioni CSS3

Question

Ho una casella che cambia dimensione quando si passa il mouse. Tuttavia, vorrei ritardare la fase di mouseout, in modo che la casella mantenga la nuova dimensione per alcuni secondi, prima di ripristinare la vecchia dimensione.

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

div:hover { 
    width:130px; 
} 

E 'possibile eseguire SENZA Javascript e solo CSS3? Devo solo preoccuparmi di supportare il 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; 
} 

Questo attiverà lo stato del mouseover subito, ma attendi 5 secondi finché non viene attivato il mouseout.

Fiddle

Answer 2

transizione può essere dichiarato come

transition: .5s all 5s 

(stenografia, il primo numero è la durata, il secondo numero è ritardo) allora non occorre la transizione di ritardo separata

scusate, non posso aggiungere come commento in quanto non ho abbastanza punti