How to use Tailwind CSS animations and transitions, and what are the common animation classes?

Tailwind CSS animations and transitions are implemented through built-in utility classes, allowing developers to easily create dynamic effects.

Transition effects:

• transition: enable all transition properties
• transition-none: disable transition effects
• transition-all: all properties have transition effects
• transition-colors: color properties have transition effects
• transition-opacity: opacity has transition effects
• transition-shadow: shadow has transition effects
• transition-transform: transform has transition effects

Transition duration:

• duration-75: 75ms
• duration-100: 100ms
• duration-150: 150ms
• duration-200: 200ms
• duration-300: 300ms
• duration-500: 500ms
• duration-700: 700ms
• duration-1000: 1000ms

Transition timing functions:

• ease-linear: linear easing
• ease-in: ease-in
• ease-out: ease-out
• ease-in-out: ease-in-out

Transition delay:

• delay-75: delay 75ms
• delay-100: delay 100ms
• delay-150: delay 150ms
• delay-200: delay 200ms
• delay-300: delay 300ms
• delay-500: delay 500ms
• delay-700: delay 700ms
• delay-1000: delay 1000ms

Animation effects:

• animate-none: no animation
• animate-spin: spin animation
• animate-ping: ping animation
• animate-pulse: pulse animation
• animate-bounce: bounce animation

Hover state:

• hover: apply styles when mouse hovers
• Example:

  html
  <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
    Hover me
  </button>

Focus state:

• focus: apply styles when element gets focus
• Example:

  html
  <input class="border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 rounded">

Active state:

• active: apply styles when element is activated
• Example:

  html
  <button class="bg-blue-500 active:bg-blue-700 text-white px-4 py-2 rounded">
    Click me
  </button>

Combined states:

• Can combine multiple state modifiers
• Example:

  html
  <button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 text-white px-4 py-2 rounded">
    Button
  </button>

Responsive animations:

• Combine with responsive prefixes
• Example:

  html
  <div class="animate-pulse md:animate-spin">
    Responsive animation
  </div>

Dark mode animations:

• Combine with dark mode
• Example:

  html
  <div class="bg-white dark:bg-gray-900 transition-colors duration-300">
    Dark mode transition
  </div>

Custom animations:

• Configure in tailwind.config.js
• Example:

  javascript
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        animation: {
          'fade-in': 'fadeIn 0.5s ease-in',
          'slide-up': 'slideUp 0.5s ease-out',
        },
        keyframes: {
          fadeIn: {
            '0%': { opacity: '0' },
            '100%': { opacity: '1' },
          },
          slideUp: {
            '0%': { transform: 'translateY(100%)' },
            '100%': { transform: 'translateY(0)' },
          },
        },
      },
    },
  }

• Use custom animations:

  html
  <div class="animate-fade-in">Fade in animation</div>
  <div class="animate-slide-up">Slide up animation</div>

Best practices:

• Reasonably use transition effects, avoid excessive animations
• Keep animations simple, improve user experience
• Test animation performance, avoid lag
• Consider user preferences (reduce animations)
• Use hardware acceleration (transform, opacity)