Свойство transition-delay

CSS-анимация не обязательно должна начинаться мгновенно после ее инициализации. Вы можете управлять ее началом с помощью свойства transition-delay. Чтобы отложить совершение перехода на определенное время, укажите его в значении свойства:

transition-delay: 1s; /* отложить начало анимации на одну секунду */

Данное свойство мало используется при реализации простой интерактивности на сайте, однако оно может быть весьма полезным, если вам предстоит создавать более сложные эффекты. По аналогии с transition-duration можно записать время задержки для каждого свойства, указанного в transition-property (при этом также важно придерживаться порядка перечисления):

transition-property: color, background-color, letter-spacing;
transition-duration: 1s, .5s, 2s;
transition-delay: 0s, 0s, 2s; /* задержка анимации letter-spacing на 2 секунды */

Не забывайте о кроссбраузерности — абсолютно все свойства семейства transition требуют использования вендорных префиксов:

-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;

Практическое применение

На практике свойство transition-delay весьма часто применяется при создании выпадающих меню, которые раскрываются при наведении курсора. В данном случае оно записывается не только для начального состояния, но и для конечного.

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

.submenu {
    opacity: 0;
    transition-property: all;
    transition-duration: .5s;
    transition-delay: 1s;
}
.menu:hover .submenu {
    opacity: 1;
    transition-delay: 0s;
}

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

Далее в учебнике: сокращенная запись transition.