Переходы, трансформации и анимации

Переход (transition) плавно меняет свойство из одного значения в другое — например, цвет кнопки при наведении. Трансформация сдвигает, поворачивает или масштабирует элемент, а анимация проигрывается сама, без действий пользователя.

Переход

Класс transition включает плавность для цветов, прозрачности, теней и трансформаций. duration- задаёт длительность в миллисекундах, ease- — характер движения:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<button class="rounded-lg bg-indigo-600 px-4 py-2 text-white transition duration-300 ease-in-out hover:bg-pink-600">
  В корзину
</button>

Наведите курсор — цвет перетекает из синего в розовый за 0,3 секунды, а не меняется мгновенно. transition-colors ограничивает плавность только цветами, delay-150 добавляет задержку.

Трансформации

Класс	Что делает
`scale-105`	Увеличивает до 105%
`rotate-3`	Поворачивает на 3 градуса
`translate-x-2`	Сдвигает вправо на 2 шага шкалы
`-translate-y-1`	Сдвигает вверх на 1 шаг

Вместе с переходом трансформации делают «живые» карточки — при наведении карточка приподнимается:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="max-w-xs rounded-xl bg-white p-4 shadow transition hover:-translate-y-1 hover:shadow-xl">
  <h2 class="font-semibold">Беспроводные наушники</h2>
  <p class="text-gray-600">$79</p>
</div>

Готовые анимации

Класс	Что происходит	Где пригодится
`animate-spin`	Вращение по кругу	Индикатор загрузки
`animate-ping`	Расходящаяся волна	Значок уведомления
`animate-pulse`	Мерцание прозрачности	Заглушка загрузки
`animate-bounce`	Подпрыгивание	Стрелка «листайте вниз»

Заглушка карточки, пока товар загружается:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="max-w-xs animate-pulse rounded-xl bg-white p-4 shadow">
  <div class="h-32 rounded-lg bg-gray-200"></div>
  <div class="mt-4 h-4 w-3/4 rounded bg-gray-200"></div>
  <div class="mt-2 h-4 w-1/4 rounded bg-gray-200"></div>
</div>

Серые прямоугольники мягко мерцают на месте будущих картинки, названия и цены.

Своя анимация

Новую анимацию добавляют в @theme: переменная --animate- и правило @keyframes. В проекте это пишут в главном CSS-файле:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
  @theme {
    --animate-wiggle: wiggle 0.5s ease-in-out infinite;
 
    @keyframes wiggle {
      0%, 100% { transform: rotate(-3deg); }
      50% { transform: rotate(3deg); }
    }
  }
</style>
 
<span class="inline-block animate-wiggle rounded-full bg-rose-500 px-3 py-1 text-sm text-white">-20%</span>

Появился класс animate-wiggle, и плашка со скидкой покачивается.

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

Злоупотреблять движением. Некоторым людям анимация мешает или вызывает дурноту, и они включают в системе «Уменьшить движение». Вариант motion-reduce: учитывает эту настройку:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="size-8 animate-spin rounded-full border-4 border-indigo-200 border-t-indigo-600 motion-reduce:animate-none"></div>

У пользователей с такой настройкой индикатор не вращается. Добавляйте motion-reduce: к постоянным анимациям.

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