Переходы

Когда стиль меняется, например при наведении мыши, браузер переключает его мгновенно. Переход (transition) растягивает эту смену во времени: цвет перетекает, кнопка плавно подрастает. Это самая простая анимация в CSS.

Первый переход

Свойство transition называет, что анимировать и сколько это длится. Наведите курсор на кнопку:

<style>
  .btn { padding: 10px 20px; border: none; background: steelblue; color: white; transition: background 0.4s; }
  .btn:hover { background: crimson; }
</style>
 
<button class="btn">Наведите на меня</button>

Без transition цвет сменился бы рывком. Время пишут в секундах (0.4s) или миллисекундах (400ms).

Части перехода

Свойство	Что задаёт	Пример
`transition-property`	Какое свойство анимировать	`background`
`transition-duration`	Сколько длится	`0.4s`
`transition-timing-function`	Как меняется скорость	`ease-in-out`
`transition-delay`	Задержка перед стартом	`0.2s`

Обычно всё пишут одной строкой: transition: background 0.4s ease-in-out 0.2s. Первое время — длительность, второе — задержка.

Функции плавности

Функция плавности описывает, как скорость меняется по ходу перехода. Наведите на серую полосу — квадраты поедут с разной манерой:

<style>
  .track { padding: 8px; background: whitesmoke; }
  .dot { width: 30px; height: 30px; margin: 4px 0; background: mediumpurple; transition: margin-left 1.5s; }
  .track:hover .dot { margin-left: calc(100% - 30px); }
  .linear { transition-timing-function: linear; }
  .in { transition-timing-function: ease-in; }
  .out { transition-timing-function: ease-out; }
</style>
 
<div class="track">
  <div class="dot linear"></div>
  <div class="dot in"></div>
  <div class="dot out"></div>
</div>

linear едет ровно, ease-in разгоняется, ease-out тормозит в конце. По умолчанию стоит ease — быстрый старт и мягкая остановка.

Несколько свойств

Чтобы анимировать несколько свойств, их перечисляют через запятую, у каждого своё время:

<style>
  .card { width: 180px; padding: 16px; background: white; border: 1px solid silver;
    transition: box-shadow 0.3s, border-color 0.6s; }
  .card:hover { box-shadow: 0 8px 20px rgb(0 0 0 / 0.2); border-color: steelblue; }
</style>
 
<div class="card">Карточка приподнимается</div>

Что анимируется

Плавно меняются свойства с промежуточными значениями: размеры, отступы, цвета, прозрачность opacity, transform. Свойства вроде display переключаются только целиком — между none и block нет середины. Для плавного появления используют opacity:

<style>
  .hint { opacity: 0; transition: opacity 0.5s; }
  .area:hover .hint { opacity: 1; }
  .area { padding: 12px; background: honeydew; }
</style>
 
<div class="area">Наведите сюда <span class="hint">— подсказка проявилась</span></div>

Частая ошибка

Если написать transition только в :hover, переход сработает при наведении, а при уходе курсора стиль вернётся рывком: без наведения у элемента перехода нет.

<style>
  .box { padding: 12px; margin-bottom: 8px; background: lightskyblue; }
  .bad:hover { background: gold; transition: background 1s; }
  .good { transition: background 1s; }
  .good:hover { background: gold; }
</style>
 
<div class="box bad">Назад рывком</div>
<div class="box good">Назад плавно</div>

Пишите transition в основном правиле элемента — тогда переход работает в обе стороны.

Спасибо, что читаете!