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

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

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

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

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

Ответы

Ответ 1

Если вам нужны разные задержки перехода 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,output

Ответ 2

Вот упрощенный пример 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;
}

Ответ 3

/* 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' (seconds), поэтому:

/* 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" */