Задержка мыши / наведения с помощью CSS3 переходов

Question

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

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

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

извините, я не могу добавить комментарий, так как у меня недостаточно баллов