Переходы (transitions) в CSS

Тень блока дала вам спокойную глубину. Переходы дают спокойное изменение во времени: кнопка смягчает фон при наведении, карточка чуть приподнимается в фокусе, цвет ссылки плавно меняется, а не щёлкает. Вы по-прежнему пишете два состояния — браузер интерполирует между ними за заданную длительность.

Что такое переход

Переход сам не придумывает новый вид. Он следит за свойством, которое уже меняется (часто через :hover, :focus-visible или класс), и анимирует это изменение. Без перехода скачок мгновенный; с ним — короткий, читаемый «скользящий» ход.

Четыре длинных свойства: transition-property, transition-duration, transition-timing-function и transition-delay. В повседневной работе чаще всего хватает сокращения transition.

Свойство и длительность

Укажите, что можно анимировать, и сколько длится изменение. Длительности — это время (0.2s, 200ms). Короткие и осмысленные интервалы лучше театральных пауз — отклик UI часто живёт около 150ms–300ms.

Ставьте transition на базовое правило — тогда анимируются и вход, и выход из hover. Перечисляйте только нужные свойства, чтобы случайные layout-скачки не «плыли» полсекунды.

Timing и delay

transition-timing-function задаёт кривую скорости: ease (ощущение по умолчанию), linear, ease-in, ease-out, ease-in-out или свой cubic-bezier(...). transition-delay ждёт перед стартом изменения — полезно для ступенчатых меню, легко переборщить на одной кнопке.

Ease-out часто естественен для появления UI. Linear подходит прогрессу, который должен читаться как ровный. Delay оставляйте для осмысленных последовательностей — а не чтобы каждый клик ощущался «с опозданием».

Сокращение и движение нескольких свойств

В сокращении обычно: property, duration, timing-function, delay. Несколько переходов можно перечислить через запятую. Сочетайте paint-friendly свойства — transform и opacity обычно плавнее, чем анимация width, height, top или margin.

Здесь глубина из прошлого урока встречается с движением: тень и подъём делят один момент hover. Держите ход небольшим — страница должна ощущаться твёрдой.

Reduced motion и когда лучше анимации

Некоторым людям нужно меньше движения. Уважайте prefers-reduced-motion: reduce: сокращайте или отключайте несущественные переходы. Transitions сильны для смены состояний A → B. Зацикленные или многошаговые истории — это CSS Animations (@keyframes) позже в модуле — после Transforms.

Попробуйте сами

1. Добавьте кнопке transition фона на 0.2s и наведите курсор — затем перенесите transition с :hover на базовое правило и сравните поведение при уходе с hover.
2. Анимируйте opacity с ease-out при переключении класса панели; попробуйте linear и почувствуйте разницу.
3. Соедините transform: translateY(...) с более мягким box-shadow на hover карточки (два свойства, один список в сокращении).
4. В DevTools эмулируйте prefers-reduced-motion: reduce и убедитесь, что несущественное движение ослабевает.
5. В этом упражнении не анимируйте height для открытого меню — оставьте эксперимент на более поздние паттерны.

Частые ошибки

• Писать transition: all 1s, чтобы каждое свойство, включая layout, скользило целую секунду
• Многосекундные длительности, из‑за которых UI кажется вялым
• Анимировать width / top / margin, когда хватило бы transform или opacity
• Игнорировать prefers-reduced-motion
• Ждать, что transition будет крутиться вечно — это территория анимаций

Кратко

• Transitions сглаживают смену свойств между состояниями за заданную длительность
• Управляйте property, duration, timing-function и delay (или сокращением transition)
• Предпочитайте короткое движение на paint-friendly свойствах; ставьте transitions на базовое правило
• Уважайте предпочтения reduced-motion; для циклов и сложных последовательностей — keyframe-анимации
• Дальше в Effects & Motion: Transforms