Задержка мыши/зависание с переходами CSS3

Question

У меня есть коробка, которая меняет размер при зависании. Тем не менее, я хотел бы отложить этап mouseout, чтобы ящик сохранял новый размер в течение нескольких секунд, прежде чем вернуть старый размер.

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

div:hover { 
    width:130px; 
} 

Возможно ли это, БЕСПЛАТНО Javascript и только CSS3? Мне нужно только заботиться о поддержке 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; 
} 

Это приведет к прямому состоянию мыши, но подождите 5 секунд до тех пор, пока мышь не будет запущена.

Fiddle

Answer 2

переход может быть объявлена ​​как

transition: .5s all 5s 

(стенографии, первое число продолжительность, второе число задержка) , то вам не нужен отдельный переход задержку

Извините, не могу добавить комментарий, так как мне не хватает баллов