Добавление анимаций с помощью плагинов Tailwind CSS

Вы создали чистый UI на Tailwind, но он выглядит статичным. Добавление движения кажется простой задачей — пока вы не уставитесь в пустой tailwind.config.js, размышляя, нужен ли вам плагин, keyframe или что-то совершенно другое. Вот чёткая карта ваших возможностей.

Что Tailwind предоставляет из коробки

Tailwind поставляется с четырьмя утилитами анимации, которые покрывают удивительно большое количество реальных сценариев использования:

• animate-spin — вращающиеся загрузчики и иконки
• animate-ping — бейджи уведомлений и радарные эффекты
• animate-pulse — скелетоны загрузки
• animate-bounce — индикаторы прокрутки и сигналы привлечения внимания

Для простой обратной связи о состоянии — спиннера загрузки на кнопке отправки, пульсирующего скелетона во время загрузки данных — этих встроенных анимаций Tailwind CSS часто вполне достаточно. Объедините их с утилитами переходов (transition, duration-300, ease-in-out) для состояний hover и focus, и вы сможете покрыть большинство микровзаимодействий без использования плагина. Вы можете изучить все эти утилиты в официальной документации по анимациям Tailwind.

Когда встроенных возможностей достаточно: загрузчики, скелетоны, бейджи и базовые переходы при наведении.

Когда стоит использовать плагин анимаций Tailwind

Встроенный набор имеет ограничения. Он не включает анимации появления/исчезновения, направленные слайды, перевороты или эффекты при прокрутке. Здесь плагины анимаций Tailwind занимают своё место.

tailwindcss-animate

tailwindcss-animate добавляет композируемые утилиты для появления и исчезновения:

<!-- Плавное появление с увеличением при монтировании -->
<div class="animate-in fade-in zoom-in duration-300">...</div>

<!-- Выезд вверх при закрытии -->
<div class="animate-out slide-out-to-top fade-out duration-200">...</div>

Он также предоставляет детальные настройки — delay-150, repeat-infinite, fill-mode-forwards, direction-alternate — которые позволяют настраивать анимации без написания кастомного CSS.

Однако плагин не получал новых релизов с 2023 года, поэтому совместимость с новыми версиями Tailwind может варьироваться в зависимости от вашей конфигурации. Некоторые современные стеки Tailwind v4 вместо этого используют более новые пакеты анимаций, разработанные с учётом CSS-ориентированной архитектуры фреймворка.

tailwind-animations

tailwind-animations использует другой подход: большая библиотека именованных анимаций (animate-fade-in, animate-shake, animate-heartbeat, animate-jelly и многие другие).

<div class="animate-fade-in">
  Блок с плавным появлением
</div>

Плагин также поддерживает утилиты анимации на основе прокрутки с использованием CSS-свойства animation-timeline.

<!-- Появление при прокрутке с использованием CSS View Timeline -->
<div class="timeline-view animate-fade-in-up animate-range-gradual">...</div>

Эти анимации, управляемые прокруткой, опираются на более новые возможности браузеров, такие как animation-timeline, поэтому поддержка браузерами может варьироваться в зависимости от вашей целевой аудитории.

Tailwind CSS v4 и CSS-ориентированный подход

Если вы используете Tailwind CSS v4, рекомендуемый способ добавления пользовательских анимаций — напрямую в вашем CSS с помощью @theme:

@theme {
  --animate-wiggle: wiggle 1s ease-in-out infinite;

  @keyframes wiggle {
    0%, 100% { transform: rotate(-3deg) }
    50% { transform: rotate(3deg) }
  }
}

Это делает animate-wiggle доступным как утилитный класс немедленно — без необходимости в плагине. Для разовых пользовательских анимаций это часто чище, чем установка зависимости.

Примечание о совместимости: Некоторые плагины были созданы для Tailwind v3 и могут не полностью поддерживать CSS-ориентированную архитектуру v4. Всегда проверяйте репозиторий или документацию плагина перед добавлением его в проект v4.

Не забывайте о доступности

Оборачивайте любую несущественную анимацию в motion-safe:, чтобы пользователи, предпочитающие уменьшенное движение, не пострадали:

<svg class="motion-safe:animate-spin ...">...</svg>

Вариант motion-reduce: в Tailwind работает наоборот — применяя стили только когда предпочтительно уменьшенное движение. Используйте оба варианта, чтобы обеспечить комфортный опыт для каждого пользователя.

Выбор подхода

Заключение

Начните с того, что Tailwind уже предоставляет. Четыре встроенные утилиты анимации и классы переходов обрабатывают большинство повседневных микровзаимодействий. Когда вам нужны последовательности появления/исчезновения, направленные слайды или эффекты при прокрутке, плагин вроде tailwindcss-animate или tailwind-animations может чисто интегрироваться. Если вы используете v4, попробуйте определить пользовательские токены анимации в CSS, прежде чем вообще обращаться к пакету. Какой бы путь вы ни выбрали, не забывайте учитывать медиа-запрос prefers-reduced-motion, чтобы каждый пользователь получил комфортный опыт.

Часто задаваемые вопросы

Могу ли я использовать tailwindcss-animate с Tailwind CSS v4?

Плагин изначально был создан для Tailwind v3 и не получал новых релизов с 2023 года. Совместимость с Tailwind v4 зависит от настройки проекта, поэтому проверьте репозиторий плагина перед использованием его в проекте v4. Многие его анимации также могут быть воссозданы напрямую с использованием директивы @theme в v4.

Как добавить пользовательскую анимацию в Tailwind без плагина?

В Tailwind v4 определите токен пользовательской анимации внутри блока @theme в вашем CSS-файле, используя переменную --animate- и соответствующее правило @keyframes. В v3 расширьте theme.extend.keyframes и theme.extend.animation в вашем tailwind.config.js. Оба подхода делают анимацию доступной как стандартный утилитный класс.

В чём разница между утилитами transition и animation в Tailwind?

Утилиты переходов, такие как transition, duration и ease, управляют изменениями свойств между двумя состояниями, например при hover или focus. Утилиты анимации, такие как animate-spin, запускают последовательности на основе keyframes, которые могут зацикливаться, воспроизводиться в обратном порядке или один раз. Используйте переходы для простых изменений состояния и анимации для непрерывного или многошагового движения.

Влияют ли анимации Tailwind на производительность?

CSS-анимации в Tailwind обычно производительны, потому что они выполняются в потоке композитора при анимации transform и opacity. Избегайте анимации свойств макета, таких как width или height. Анимации при прокрутке с использованием CSS-функции animation-timeline также могут быть эффективными, но поддержка браузерами должна быть проверена перед использованием в продакшене.