Анимация

Вращение

Добавьте утилиту animate-spin, чтобы добавить анимацию линейного вращения к таким элементам, как индикаторы загрузки.

Пинг

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

Пульс

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

Прыжок

Добавьте утилиту animate-bounce, чтобы элемент подпрыгивал вверх и вниз - полезно для таких вещей, как индикаторы “прокрутки вниз”.

Предпочтительно ограниченное движение

Вы можете условно применять анимацию и переходы, используя варианты motion-safe и motion-reduce:

<button type="button" class="bg-indigo-600 ..." disabled>
  <svg class="motion-safe:animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Обработка
</button>

Эти варианты не включены по умолчанию, но вы можете включить их в разделе variants вашего файла tailwind.config.js:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    animation: ['responsive', 'motion-safe', 'motion-reduce']
  }
}

Подробнее читайте в документации состояния вариантов.

Адаптивность

Чтобы изменить или отключить анимацию в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите анимации. Например, используйте md:animate-none, чтобы применить утилиту animate-none только при средних размерах экрана и выше.

<div class="animate-spin md:animate-none ...">
  <!-- ... -->
</div>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

Анимация по самой своей природе, как правило, очень привязана к проекту. Анимации, которые мы включаем по умолчанию, лучше всего рассматривать как полезные примеры, и вам предлагается настроить анимацию в соответствии с вашими потребностями.

По умолчанию Tailwind предоставляет утилиты для четырех различных примеров анимации, а также утилиту animate-none. Вы изменяете, добавляете или удаляете их, настраивая раздел animation в конфигурации вашей темы.

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        animation: {
+         'spin-slow': 'spin 3s linear infinite',
        }
      }
    }
  }

Чтобы добавить новую анимацию @keyframes, используйте раздел keyframes конфигурации вашей темы:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        keyframes: {
+         wiggle: {
+           '0%, 100%': { transform: 'rotate(-3deg)' },
+           '50%': { transform: 'rotate(3deg)' },
+         }
        }
      }
    }
  }

Затем вы можете ссылаться на эти ключевые кадры по имени в разделе animation конфигурации вашей темы:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        animation: {
+         wiggle: 'wiggle 1s ease-in-out infinite',
        }
      }
    }
  }

Дополнительные сведения о настройке темы по умолчанию смотрите в документации по настройке темы.

Варианты

По умолчанию, только responsive варианты создаются для утилит animation.

Вы можете контролировать, какие варианты создаются для утилит animation для изменения свойства animation в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       animation: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения animation, Вы можете полностью отключить их, установив для animation свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     animation: false,
    }
  }