Delay mouseout / hover с переходами CSS3

17

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

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

div:hover {
    width:130px;
}

Возможно ли это сделать БЕЗ Javascript и только CSS3? Мне нужно только поддерживать webkit .

    
задан patad 22.02.2012 в 11:33
источник
  • вы попробовали свойство css3 animation? Я пробовал некоторые вещи с анимацией, но я не уверен, что это то, что вы хотите. но если вы хотите, я могу вам это дать. –  Shabib 22.02.2012 в 12:01

2 ответа

37
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

    
ответ дан patad 22.02.2012 в 12:47
источник
  • отредактировано для добавления префиксов не webkit - это просто хорошая практика –  Michael Mullany 22.02.2012 в 17:06
  • в определении тега div, не указывает «переход:» и «переход-задержка» по существу дубликат? Первое значение спецификации перехода - это значение задержки, нет? –  Screenack 26.04.2013 в 23:02
  • @Screenack Нет, первое значение - это продолжительность перехода - сколько времени потребуется, чтобы завершить работу после его завершения. –  Sandwich 10.01.2015 в 22:22
  • удивительное использование переходов, патад. –  Mindwin 02.12.2016 в 17:30
6

можно объявить как

transition: .5s all 5s

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

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

    
ответ дан Jenny 05.05.2015 в 18:39
источник