Различные переходы CSS-задержки для наведения и mouseout?

можно ли использовать переходы CSS3 с другой задержкой переключения между "состояниями"? Например, я пытаюсь сделать элемент сразу выше при наведении, а затем на "mouseout", чтобы подождать секунду, прежде чем вернуться к начальной высоте элемента.

демо-странице: jsfiddle.net/RTj9K (наведите черный ящик в правом верхнем углу)

CSS: #bar { transition:.4s ease-out 0, 1s; }

Я думал, что тайминги на конце, связанные с задержкой, но похоже, все идет не так, как я себе представляла.

39
css css-transitions css3 transitions

3 ответов

если вы хотите различные задержки перехода CSS на hover и mouseout, вы должны установить их с помощью соответствующих селекторов. В приведенном ниже примере при наведении элемента начальная задержка при наведении 0 но на mouseout переход задерживается на 1s.

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }

вы можете найти полный CSS в обновленной демо-версии моего вопроса ниже. Я использовал стенографию transition свойство, порядок значений:

transition:<property> <duration> <timing-function> <delay>;

Ответ Демо: http://jsbin.com/lecuna/edit?html, css, вывод

89

вот упрощенный пример JSFiddle. В основном вам нужно transition-delay свойства:

#transform {
    height:40px;
    width:40px;
    background-color:black;
    transition: .4s ease-out; 
    transition-delay: 2s;
    /*or shorthand: transition: .4s ease-out 2s;*/
}

#transform:hover {
    transition: .4s ease-out; 
    width:400px;
}
10
/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0; }

просто сказать, что это не сработает, если вы не введете символ " s " (секунды), так что:

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }   /* note "0s" */
2