Как сделать задержку в css

Свойство transition-delay

Свойство transition-delay устанавливает задержку перед запуском плавного перехода transition .

Синтаксис

Значения

Значение по умолчанию: 0s .

Пример

Наведите мышкой на блок — 3 секунды ничего не будет происходить (стоит задержка 3s ), а затем он плавно изменит свою ширину за 2 секунды. Если затем убрать мышь — то снова 3 секунды ничего не будет происходить, а затем ширина плавно уменьшится до исходного значения:

#elem < border: 1px solid black; transition-duration: 2s; transition-property: width; transition-delay: 3s; height: 50px; width: 100px; >#elem:hover < width: 400px; >

Пример

Наведите мышкой на блок — он сначала изменит свою ширину за 2 секунды, а потом изменит свою высоту за 4 секунды. Свойства будут меняться последовательно, так как для высоты установлена в 3 секунды (время изменения ширины). Если убрать мышь — то изменения произойдут в обратном порядке: сначала уменьшится ширина, а потом уменьшится высота:

#elem < border: 1px solid black; transition-duration: 2s, 4s; transition-property: width, height; transition-delay: 0s, 3s; width: 100px; height: 25px; >#elem:hover < width: 400px; height: 50px; >

Смотрите также

• свойство transition-property ,
  которое задает имя свойства для плавного перехода
• свойство transition-duration ,
  которое задает длительность плавного перехода
• свойство transition-timing-function ,
  которое задает временную функцию для плавного перехода
• свойство transition ,
  которое является сокращением для плавного перехода
• свойство animation ,
  с помощью которого можно сделать анимацию

transition-delay

Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.

Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах transition-property .

Синтаксис

Значения

HTML5 CSS3 IE 10+ Cr Op Sa Fx

В данном примере при наведении курсора на стрелку, раскрывается блок с числами.

Объектная модель

[window.]document.getElementById(» elementID «).style.transitionDelay

Браузеры

Chrome до версии 26.0, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transition-delay .

Opera до версии 12.10 поддерживает нестандартное свойство -o-transition-delay .

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transition-delay .

CSS по теме

Как сделать задержку выполнения в css*?

Добрый день! Понимаю, что вопрос сформулирован в корни неправильно, но постараюсь объяснить его верно.
У меня есть меню, в нем есть субменю. При наводе на меню, выпадает суб меню. Есть анимация плавного выхода, и в коде написано так, чтобы при отводе мыши от пункта, субменю въезжало обратно. Только проблема: Это не нужно когда внизу располагается еще один пункт с субменю и когда с первого пункта наводим на второй, то первое субменю пытается заехать обратно (скрыться) и через пол секунды не скрываясь выезжает обратно.

Сам код простой:

#menu ul li:hover > ul left: 287px;
text-align: left;
padding-left: 4px;
-webkit-transition: left 400ms ease-in;
-moz-transition: left 400ms ease-in;
-ms-transition: left 400ms ease-in;
transition: left 400ms ease-in;
>

#menu ul li > ul position: absolute;
background-color: #2E2E2E;
top: 0;
left: 34px;
text-align: left;
padding-left: 4px;
min-width: 200px;
z-index: -1;
margin-top: 37px;
height: 368px;
-webkit-transition: left 500ms ease-in;
-moz-transition: left 500ms ease-in;
-ms-transition: left 500ms ease-in;
transition: left 500ms ease-in;
>

Как сделать чтобы при выделении другого пункта меню, старый сразу не пытался скрыться, чтобы была задержка, или что-то другое.

Надеюсь я смог хоть чуть-чуть вопрос сформулировать правильно.

• Вопрос задан более трёх лет назад
• 2063 просмотра

3 комментария

Оценить 3 комментария