Tailwind CSS Animations

Animaciones Tailwind CSS Configuración

Configuración Inicial Paso 1

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
  extend: {
    animation: {
      'spin-slow': 'spin 3s linear infinite',
      'bounce-slow': 'bounce 3s infinite',
      'fade-in': 'fadeIn 0.5s ease-out',
      'slide-in': 'slideIn 0.5s ease-out',
    },
    keyframes: {
      fadeIn: {
        '0%': { opacity: '0', transform: 'translateY(10px)' },
        '100%': { opacity: '1', transform: 'translateY(0)' },
      },
      slideIn: {
        '0%': { transform: 'translateX(-100%)' },
        '100%': { transform: 'translateX(0)' },
      },
    },
  },
},
plugins: [],
}

Transiciones Básicas Paso 2

Duración

<button class="transition duration-150 ...">Rápido</button>
<button class="transition duration-300 ...">Normal</button>
<button class="transition duration-700 ...">Lento</button>

Timing

<button class="transition ease-linear ...">Linear</button>
<button class="transition ease-in ...">Ease-in</button>
<button class="transition ease-out ...">Ease-out</button>
<button class="transition ease-in-out ...">Ease-in-out</button>

Propiedades

<button class="transition-all ...">Todo</button>
<button class="transition-colors ...">Colores</button>
<button class="transition-opacity ...">Opacidad</button>
<button class="transition-transform ...">Transformación</button>

Animaciones Predefinidas Paso 3

Animaciones Básicas

<!-- Spin -->
<div class="animate-spin">
  <!-- Contenido giratorio -->
</div>

<!-- Ping -->
<div class="animate-ping">
  <!-- Efecto de ping -->
</div>

<!-- Pulse -->
<div class="animate-pulse">
  <!-- Efecto de pulso -->
</div>

<!-- Bounce -->
<div class="animate-bounce">
  <!-- Efecto de rebote -->
</div>

Combinando Animaciones

<div class="
animate-bounce
hover:animate-spin
transition-all
duration-300
ease-in-out
">
Contenido Animado
</div>

Animaciones Personalizadas Paso 4

Definiendo Nuevas Animaciones

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

Uso de Animaciones Personalizadas

<div class="animate-wiggle">
  Elemento que se mueve
</div>

<div class="animate-fade-in-down">
  Elemento que aparece desde arriba
</div>

<div class="animate-slide-in-right">
  Elemento que entra desde la derecha
</div>

Interacciones y Estados Paso 5

Hover

<button class="
  transform
  transition-all
  duration-300
  hover:scale-110
  hover:rotate-3
  hover:bg-blue-600
">
  Botón con Hover
</button>

Focus

<input class="
  transition-all
  duration-300
  focus:outline-none
  focus:ring-2
  focus:ring-blue-500
  focus:scale-105
">

Active

<button class="
  transform
  transition-all
  duration-150
  active:scale-95
">
  Botón con Efecto Click
</button>

Optimización y Rendimiento Paso 6

CSS Personalizado con @layer

@layer utilities {
.animate-once {
  animation-iteration-count: 1;
}

.animate-twice {
  animation-iteration-count: 2;
}

.animate-thrice {
  animation-iteration-count: 3;
}
}

/* Uso */
<div class="animate-bounce animate-once">
Solo rebota una vez
</div>

Reducción de Movimiento

module.exports = {
theme: {
  extend: {
    screens: {
      'motion-safe': { 'raw': '(prefers-reduced-motion: no-preference)' },
      'motion-reduce': { 'raw': '(prefers-reduced-motion: reduce)' },
    },
  },
},
}

// Uso
<div class="
motion-safe:animate-bounce
motion-reduce:transition-none
">
Respeta preferencias de movimiento
</div>

Mejores Prácticas Recomendado

1. Componentes Reutilizables

function Button({ children, animated = true }) {
return (
  <button className={`
    px-4 py-2
    bg-blue-500
    text-white
    rounded
    ${animated ? `
      transform
      transition-all
      duration-300
      hover:scale-105
      hover:bg-blue-600
      active:scale-95
    ` : ''}
  `}>
    {children}
  </button>
)
}

2. Grupos de Animación

<div class="group">
  <div class="
    transform
    transition-all
    duration-300
    group-hover:scale-110
    group-hover:rotate-3
  ">
    Animación en grupo
  </div>
</div>

3. Animaciones Responsivas

<div class="
  animate-none
  sm:animate-fade-in
  md:animate-slide-in
  lg:animate-bounce
">
  Animaciones responsivas
</div>

🐝