Opóźnienie mouseout/hover z przejściami CSS3

Question

Mam pudełko, które zmienia rozmiar podczas podnoszenia. Chciałbym jednak opóźnić etap mouseout, aby pudełko zachowało nowy rozmiar przez kilka sekund, zanim odzyska stary rozmiar.

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

div:hover { 
    width:130px; 
} 

Czy można to zrobić BEZ JavaScriptu i tylko CSS3? Mam tylko na uwadze wspieranie 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; 
} 

To wywoła stan mouseover od razu, ale poczekaj 5 sekund, aż mouseout jest wyzwalany.

Fiddle

Answer 2

przejściowy może zostać uznana jako

transition: .5s all 5s 

(skrót, pierwsza liczba jest czas trwania, druga liczba jest opóźnienie) wtedy nie trzeba oddzielnego przejściowego opóźnienia

przepraszam, nie mogę dodać jako komentarza, ponieważ nie mam wystarczającej liczby punktów