transition-delay

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"

Анимация будет запущена через 0.3 секунды:

        
          
          .box {  transition-property: color, padding;  transition-duration: .3s;  transition-delay: .3s;}
          .box {
  transition-property: color, padding;
  transition-duration: .3s;
  transition-delay: .3s;
}

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Значения времени:

        
          
          .selector {  transition-delay: 3s; /* Одно значение в секундах */  transition-delay: 2s, 4ms; /* Несколько значений в секундах и миллисекундах */}
          .selector {
  transition-delay: 3s; /* Одно значение в секундах */
  transition-delay: 2s, 4ms; /* Несколько значений в секундах и миллисекундах */
}

        
        
          
        
      

Глобальные значения:

        
          
          .selector {  transition-delay: inherit;  transition-delay: initial;  transition-delay: unset;}
          .selector {
  transition-delay: inherit;
  transition-delay: initial;
  transition-delay: unset;
}

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

Синтаксически свойство полностью аналогично transition-duration, но использование их вместе помогает достичь интересных эффектов. Например, создать цепочку последовательных изменений свойств:

Открыть демо в новой вкладке

Подсказки

Секция статьи "Подсказки"

💡В краткой записи свойства transition свойство transition-delay стоит на третьем месте сразу после указания длительности перехода: transition: color .3s .5s. Использовать свойство transition-delay отдельно от сокращённой записи стоит, если переход комплексный и анимируется несколько свойств с разными задержками.

💡 Хорошо всегда помнить о том, что мы можем стилизовать плавное изменение свойства в две стороны:

  • от базового состояния → к изменённому состоянию;
  • от изменённого состояния → к базовому состоянию.

Поэтому важно указывать transition-delay для обоих состояний. При убирании курсор мыши сразу начнёт меняться padding, а через 500 мс — цвет текста:

        
          
          .box {  color: red;  padding: 12px;  transition-property: color, padding;  transition-duration: .5s, .5s;  transition-delay: .5s, 0s}
          .box {
  color: red;
  padding: 12px;
  transition-property: color, padding;
  transition-duration: .5s, .5s;
  transition-delay: .5s, 0s
}

        
        
          
        
      

При наведении мыши сразу начнёт меняться цвет текста, а через 500 мс — padding:

        
          
          .box:hover {  color: green;  padding: 24px;  transition-property: color, padding;  transition-duration: .5s, .5s;  transition-delay: 0s, .5s}
          .box:hover {
  color: green;
  padding: 24px;
  transition-property: color, padding;
  transition-duration: .5s, .5s;
  transition-delay: 0s, .5s
}