13. Анимации

Tailwind CSS: Анимации

Tailwind предоставляет утилиты для transitions и анимаций. Плавные переходы и анимации делают UI живым и профессиональным.

Transition (плавные переходы)

<!-- Базовый transition — анимирует все изменяемые свойства -->
<button class="bg-blue-600 hover:bg-blue-700 transition">Кнопка</button>

<!-- Конкретные свойства -->
<div class="transition-colors">Только цвет</div>
<div class="transition-opacity">Только прозрачность</div>
<div class="transition-transform">Только трансформации</div>
<div class="transition-shadow">Только тени</div>
<div class="transition-all">Все свойства</div>

<!-- Длительность -->
<div class="transition duration-150">150ms</div>
<div class="transition duration-300">300ms (обычный)</div>
<div class="transition duration-500">500ms (медленный)</div>
<div class="transition duration-700">700ms</div>
<div class="transition duration-1000">1000ms = 1s</div>

<!-- Easing (кривая скорости) -->
<div class="transition ease-linear">Линейный</div>
<div class="transition ease-in">Разгон</div>
<div class="transition ease-out">Торможение</div>
<div class="transition ease-in-out">Разгон + торможение</div>

<!-- Задержка -->
<div class="transition delay-150">Задержка 150ms</div>
<div class="transition delay-300">Задержка 300ms</div>

Transform (трансформации)

<!-- Scale (масштаб) -->
<div class="hover:scale-105 transition-transform">Увеличивается</div>
<div class="hover:scale-95 transition-transform">Уменьшается (нажатие)</div>
<div class="hover:scale-110 transition-transform">Сильное увеличение</div>

<!-- Translate (сдвиг) -->
<div class="hover:-translate-y-1 transition-transform">Поднимается вверх</div>
<div class="hover:translate-y-1 transition-transform">Опускается вниз</div>
<div class="hover:translate-x-2 transition-transform">Сдвигается вправо</div>

<!-- Rotate (поворот) -->
<div class="hover:rotate-3 transition-transform">Поворот 3deg</div>
<div class="hover:-rotate-3 transition-transform">Поворот -3deg</div>
<div class="hover:rotate-12 transition-transform">Поворот 12deg</div>
<div class="hover:rotate-45 transition-transform">Поворот 45deg</div>
<div class="hover:rotate-180 transition-transform">Разворот 180deg</div>

<!-- Skew (наклон) -->
<div class="hover:skew-x-3 transition-transform">Наклон по X</div>
<div class="hover:skew-y-3 transition-transform">Наклон по Y</div>

Готовые анимации (animate-*)

<!-- Спиннер -->
<div class="animate-spin">🔄</div>
<div class="animate-spin w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full"></div>

<!-- Пульсация (для скелетонов) -->
<div class="animate-pulse bg-gray-200 rounded h-4 w-32"></div>

<!-- Подпрыгивание -->
<div class="animate-bounce">⬇️</div>

<!-- Мигание -->
<div class="animate-ping absolute w-4 h-4 bg-blue-400 rounded-full opacity-75"></div>

Скелетон-загрузчик (skeleton loader)

<div class="animate-pulse space-y-4 p-6">
  <!-- Аватар + строки -->
  <div class="flex items-center gap-4">
    <div class="w-12 h-12 bg-gray-200 rounded-full"></div>
    <div class="flex-1 space-y-2">
      <div class="h-4 bg-gray-200 rounded w-3/4"></div>
      <div class="h-3 bg-gray-200 rounded w-1/2"></div>
    </div>
  </div>
  <!-- Текстовые строки -->
  <div class="space-y-2">
    <div class="h-3 bg-gray-200 rounded"></div>
    <div class="h-3 bg-gray-200 rounded w-5/6"></div>
    <div class="h-3 bg-gray-200 rounded w-4/6"></div>
  </div>
</div>

Кастомные анимации

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      keyframes: {
        'fade-in': {
          '0%': { opacity: '0', transform: 'translateY(10px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        'slide-in': {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(0)' },
        },
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      },
      animation: {
        'fade-in': 'fade-in 0.5s ease-out',
        'slide-in': 'slide-in 0.3s ease-out',
        wiggle: 'wiggle 1s ease-in-out infinite',
      },
    },
  },
}

<div class="animate-fade-in">Появляется плавно</div>
<div class="animate-wiggle">Покачивается</div>

Практика