transition - это сокращённая запись сразу для четырёх свойств: какое свойство анимировать, сколько это длится, с какой функцией плавности и через какую задержку. Порядок частей в целом свободный, но у двух временных значений (длительности и задержки) есть жёсткое правило: первое по счёту время - это всегда длительность, второе - задержка, независимо от того, где стоят остальные части записи.
Попробуй прямо сейчас: наведи курсор на карточку - цвет фона меняется почти сразу (0.3 секунды, без задержки), а поворот и сдвиг стартуют только через 0.3 секунды паузы и длятся целую секунду. Поменяй местами два времени в записи transform - вместо 1s ease-out .3s напиши .3s ease-out 1s - и задержка с длительностью поменяются местами: движение начнётся почти сразу, но растянется на целую секунду ожидания в конце.
Как записать все параметры одной строкой
Внутри transition можно перечислить название свойства, длительность, функцию плавности и задержку в любом порядке - браузер сам разберётся, где что, по типу значения (слово-свойство, слово-функция или число со временем). Единственное исключение - когда указаны ДВА значения времени сразу: тогда первое из них становится transition-duration (длительность), а второе - transition-delay (задержка), и это правило работает по порядку следования, а не по смыслу. Если не указать свойство - по умолчанию берётся all (все анимируемые свойства сразу); если не указать длительность - она равна 0s, и переход просто не будет заметен, даже если остальные части записи верны.
.box {
transition: transform 1s ease-out .3s;
} - длительность 1s, функция ease-out, задержка .3s: сначала пауза 0.3 секунды, потом плавное движение длиной в секунду.
Неправильное ожидание - что достаточно просто поменять местами два числа, и смысл останется тем же:
.box {
transition: transform .3s ease-out 1s;
} - здесь ПЕРВОЕ число (.3s) станет длительностью, а ВТОРОЕ (1s) - задержкой: движение уложится в 0.3 секунды, но начнётся только через целую секунду ожидания - результат почти противоположный.
Из истории
Именно эту неоднозначность - как отличить длительность от задержки, если оба значения выглядят одинаково - в мае 2009 года публично поднял на рабочей рассылке W3C www-style Дэвид Барон (L. David Baron), инженер Mozilla и один из соавторов спецификаций CSS Transitions и CSS Animations. Он предлагал либо жёстко зафиксировать порядок, либо вовсе запретить указывать оба значения в сокращённой записи. В итоге спецификация выбрала третий путь - тот самый позиционный принцип "первое время - длительность, второе - задержка", которым мы пользуемся сегодня. Письмо в архиве рассылки W3C.
Несколько переходов через запятую
Чтобы задать разным свойствам разные настройки перехода, их перечисляют через запятую - каждый элемент списка описывает свой отдельный переход со своими длительностью, функцией и задержкой. Есть удобный приём: указать all с одними настройками "для всех остальных" свойств, а после запятой - конкретное свойство с настройками, которые должны отличаться, и оно "переопределит" общее правило именно для себя. А вот если одно и то же свойство случайно указать в списке дважды - побеждает только ПОСЛЕДНЕЕ по порядку значение для этого свойства, более раннее просто отбрасывается без предупреждения в консоли.
.card {
transition: all .2s, transform 1s ease-out;
} - все свойства (цвет фона, тень и так далее) меняются быстро за .2s, а transform отдельно и заметно медленнее - за 1s с ease-out.
Неправильное ожидание - что можно один раз "подправить" настройки, дописав то же свойство ещё раз в конец списка:
.card {
transition: transform .2s, transform 1s;
} - оба элемента списка описывают transform, но реально применится только transform 1s (последний по счёту) - первая часть .2s окажется мёртвым кодом.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Поменять местами длительность и задержку, думая, что смысл не изменится | Первое по счёту время всегда становится длительностью, второе - задержкой, независимо от намерения автора | Всегда писать длительность первым числом, а задержку - вторым (или вовсе не писать задержку, если она не нужна) |
| Забыть указать длительность вовсе (написать только свойство или только функцию плавности) | transition-duration по умолчанию равен 0s - переход технически есть, но выполняется мгновенно и незаметен | Всегда включать хотя бы одно значение времени - оно и станет длительностью |
| Указать одно и то же свойство дважды в списке через запятую (например, при правке кода) | Применяется только последнее по порядку значение для этого свойства, более раннее молча отбрасывается | Держать в списке каждое свойство только один раз; для "общих" настроек использовать all в начале списка |
| Ждать ошибку в консоли, если что-то в transition написано некорректно | Браузер просто игнорирует непонятную часть значения, никаких предупреждений не будет - переход тихо не сработает | Проверять результат вживую (навести курсор), а не полагаться на консоль разработчика |
Шпаргалка
| Запись | Что означает |
|---|---|
| transition: свойство длительность функция задержка; | Порядок частей свободный, кроме двух чисел времени подряд |
| Свойство не указано | По умолчанию all - анимируются все подходящие свойства |
| Длительность не указана | По умолчанию 0s - перехода визуально не будет |
| Два значения времени подряд | Первое - всегда transition-duration, второе - всегда transition-delay |
| transition: all X, свойство Y; | Свойство получает свою настройку Y, всё остальное - общую X |
| Одно свойство указано дважды через запятую | Побеждает последнее по порядку значение, более раннее отбрасывается |
Коротко: отвечаем на вопросы
Можно ли одним свойством transition задать разные настройки для разных CSS-свойств?
Да - для этого элементы списка перечисляют через запятую, например transition: transform 4s, color 1s;. Каждый элемент списка полностью независим и может иметь свою длительность, функцию плавности и задержку.
Обязательно ли писать длительность и задержку в строго определённом порядке?
Название свойства и функцию плавности можно писать в любом месте записи - браузер распознаёт их по типу значения. А вот если указаны два числа времени, порядок жёстко фиксирован: первое всегда становится длительностью, второе - задержкой, поменять их местами без изменения смысла нельзя.
