Руководство по CSS

Правила CSS (@RULES)

Полный список свойств CSS

Свойство transition-duration в CSS3 Свойство transition в CSS3

Метод использования и примеры CSS transition-delay

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

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

Значение по умолчанию:	0s
Подходит для:	Все элементы::before и::after Дробные элементы
Наследование:	нет
Анимации:	Нет.См. также Свойства анимации.
Версия:	Новая функция CSS3
Синтаксис JavaScript:	объект.style.transitionDelay="3s"

Использование синтаксиса transition-delay

Синтаксис этого свойства следующий:

transition-delay:　time　|　initial　|　inherit

Ниже приведен пример того, как использовать свойство transition-delay.

Пример

button　{
　　　　background:　#fd7c2a;
　　　　/*　For　Safari　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　4s;
　　　　-webkit-transition-delay:　2s;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　4s;
　　　　transition-delay:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

Проверьте, посмотрите < › >

Внимание:Этот параметр позволяет использовать отрицательные значения. Однако, он似乎已经开始 выполнять в середине周期的 перехода, например, переход с задержкой -2s начинает сразу, но начинается через 2 секунды после начала перехода.

Значение свойства

В таблице описаны значения этого свойства.

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

Совместимость браузеров

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

	Firefox 4+ ^-moz-, 16 + Google Chrome 4+ ^-webkit-, 26 + Internet Explorer 10+ Apple Safari 3.1+ ^-webkit-, 6.1+ Opera 10.5+ ^-o-, 12.1+

Дополнительное чтение

Пожалуйста, обратитесь к следующим руководствам:CSS3 Transitions.

Связанные свойства:transition,transition-duration,transition-property,transition-timing-function.

Свойство transition-duration в CSS3 Свойство transition в CSS3