transition-duration задаёт, сколько длится сам переход, а transition-delay - через сколько времени после изменения он начнётся. Оба принимают значения в секундах (s) или миллисекундах (ms), причём единицу нельзя опускать даже для нуля: transition-duration: 0; - невалидный CSS, обязательно нужно писать 0s.
Попробуй прямо сейчас: наведи курсор на список - пункты проявляются не разом, а один за другим, потому что у каждого своя transition-delay. Поменяй .15s/.3s на большие значения и посмотри, как усиливается эффект очереди.
transition-duration: сколько длится переход
transition-duration принимает время в секундах (s) или миллисекундах (ms) - 300ms и .3s означают одно и то же. Важная особенность именно времени в CSS: в отличие от длин, где margin: 0; без единицы - это нормально, у временных значений единицу нельзя опускать даже для нуля. Отрицательная длительность тоже не превращается в ноль - она делает всё объявление transition-duration невалидным, и браузер его просто отбрасывает.
transition-duration: 0s;
transition-duration: 300ms; - обе записи валидны, вторая равна .3s.
Неправильное ожидание - что ноль можно написать так же, как в длинах:
transition-duration: 0; - без единицы измерения объявление невалидно; браузер его игнорирует, как будто transition-duration не задавали вовсе.
transition-delay: когда переход начинается
transition-delay откладывает старт перехода: при значении .5s браузер подождёт полсекунды после изменения свойства и только потом начнёт анимировать его в течение времени, заданного в transition-duration. Задержка не делает сам переход длиннее - она лишь сдвигает его начало, поэтому общее время до финального значения равно delay плюс duration. Самое интересное - что delay может быть отрицательным: тогда переход стартует не с нуля, а сразу с той точки, как будто часть времени уже прошла.
transition: opacity 2s -1s; - задержка отрицательная, поэтому переход стартует сразу же, как будто уже прошла 1 секунда из 2, и доиграет оставшуюся секунду с той точки.
Не путай с отрицательной длительностью - вот она уже невалидна:
transition: opacity -1s; - отрицательная transition-duration делает всё объявление невалидным, перехода не будет вообще, в отличие от отрицательной задержки.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Писать transition-duration: 0; без единицы измерения |
В отличие от длин, время в CSS требует единицу даже для нуля - объявление невалидно, переход не работает вообще | Всегда писать 0s или 0ms |
| Задать отрицательную transition-duration, ожидая, что она "выключит" переход | Отрицательная длительность делает всё объявление невалидным, а не приравнивается к нулю | Использовать 0s, если переход не нужен вовсе |
Перепутать порядок значений в сокращённой записи transition: свойство ВРЕМЯ1 ВРЕМЯ2 |
Первое время после свойства - всегда duration, второе (если есть) - delay; перепутав местами, получишь другую задержку вместо другой длительности | Помнить порядок: свойство → длительность → функция плавности → задержка |
| Ждать, что задержка делает сам переход медленнее | transition-delay не растягивает переход - он лишь откладывает старт; общее время до конца равно delay плюс duration | Если нужен более медленный переход, увеличивать duration, а не delay |
Шпаргалка
| Свойство/значение | Значение |
|---|---|
| transition-duration | Сколько длится переход; единица обязательна даже для нуля - 0s, не 0 |
| transition-delay | Через сколько времени после изменения стартует переход (по умолчанию 0s) |
| Единицы | s - секунды, ms - миллисекунды; 300ms = .3s |
| Отрицательная delay | Переход стартует уже частично пройденным, например -1s при duration 2s - старт с середины |
| Отрицательная duration | Невалидна - всё объявление transition игнорируется целиком |
Коротко: отвечаем на вопросы
В чём разница между transition-duration и transition-delay?
duration - это сколько длится сам переход от старого значения к новому. delay - это сколько браузер ждёт ПЕРЕД тем, как вообще начать переход. Одно отвечает за скорость самого движения, другое - за момент старта.
Можно ли сделать отрицательную задержку у перехода?
Да, и это не ошибка, а рабочая часть спецификации: отрицательная transition-delay заставляет переход стартовать сразу же, но как будто часть времени уже прошла - например, -1s при duration 2s начнёт показ ровно с середины и доиграет оставшуюся секунду.
Как анимировать несколько элементов по очереди, а не одновременно?
Самый простой способ на чистом CSS - дать соседним элементам разную transition-delay, например через :nth-child(2), :nth-child(3) и так далее. Все элементы меняют свойство в один момент, но начинают его показывать с разной задержкой, из-за чего и создаётся эффект очереди.
