CSS-свойство transition-delay

CSS-свойство transition-delay определяет время через которое начнется эффект перехода transition. Например, указанное значение 2с запустит эффект перехода через 2с после его начала.

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

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

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

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;
    /* Standard syntax */
    transition-property: background;
    transition-duration: 4s;
    transition-delay: 2s;
}
button:hover {
    background: #3cc16e;
}

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

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

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

Свойство transition-delay поддерживается во всех основных браузерах.