Переход-задержка - CSS-хитрости

transition-delayСвойство, как правило , используется в качестве части transitionстенографии, используется для определения продолжительности времени , чтобы задержать начало перехода.

.delay-me ( transition-delay: 0.25s; )

Значение может быть одним из следующих:

Допустимое значение времени, определенное в секундах или миллисекундах, например, 1.3sили125ms
Список значений времени, разделенных запятыми, для определения отдельных значений задержки при нескольких переходах для одного элемента, например 1s background-color, 350ms transform

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

Если у перехода есть отрицательное значение задержки, это приведет к немедленному началу перехода (без задержки), однако переход начнется на полпути в процессе, как если бы он уже начался.

Следующее перо показывает эффект наведения на поле, в котором используется transition-delayзначение 2sс продолжительностью перехода 1s:

См.
Демонстрацию задержки перехода пера от CSS-Tricks (@ css-tricks)
на CodePen.

Теперь сравните это со следующей демонстрацией, у которой есть задержка -1sи продолжительность 3s:

См.
Демонстрацию задержки перехода Pen Negative от CSS-Tricks (@ css-tricks)
на CodePen.

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

Для совместимости со всеми поддерживающими браузерами требуются префиксы поставщика, а стандартный синтаксис объявлен последним:

.example ( -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )

IE10 (первая поддерживаемая стабильная версия IE transition-delay) не требует -ms-префикса.

Типичный вариант использования - постепенные переходы:

См. «
Переносные анимации пера » Криса Койера (@chriscoyier)
на CodePen.

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.