Skip to content
Logo de la documentación HoneyCode

Plugin de Animaciones para Tailwind CSS

Plugin de Animaciones para Tailwind CSS Plugin

Section titled “Plugin de Animaciones para Tailwind CSS ”

Instalación Paso 1

Section titled “Instalación ”
Terminal window
npm install @midudev/tailwind-animations

Configuración Paso 2

Section titled “Configuración ”

tailwind.config.js

Section titled “tailwind.config.js”
/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...resto de tu configuración
  plugins: [
    require('@midudev/tailwind-animations')
  ],
}

styles.css

Section titled “styles.css”
@import 'tailwindcss';
@plugin "@midudev/tailwind-animations";

Uso Básico Paso 3

Section titled “Uso Básico ”

Animaciones Predefinidas

Section titled “Animaciones Predefinidas”
<!-- Fade In -->
<div class="animate-fade-in">
  Aparece suavemente
</div>


<!-- Slide In -->
<div class="animate-slide-in">
  Desliza desde la izquierda
</div>


<!-- Bounce -->
<div class="animate-bounce-in">
  Rebota al entrar
</div>

Modificadores

Section titled “Modificadores”
<!-- Duración -->
<div class="animate-fade-in duration-300">
  Rápido
</div>


<!-- Retraso -->
<div class="animate-slide-in delay-300">
  Espera antes de animar
</div>


<!-- Dirección -->
<div class="animate-slide-in-left">
  Desde la izquierda
</div>
<div class="animate-slide-in-right">
  Desde la derecha
</div>

Animaciones Avanzadas Paso 4

Section titled “Animaciones Avanzadas ”

Combinando Animaciones

Section titled “Combinando Animaciones”
<div class="
  animate-fade-in
  hover:animate-bounce
  group-hover:animate-shake
">
  Múltiples estados
</div>

Animaciones Encadenadas

Section titled “Animaciones Encadenadas”
<div class="group">
  <div class="animate-fade-in">Primero</div>
  <div class="animate-fade-in delay-200">Segundo</div>
  <div class="animate-fade-in delay-400">Tercero</div>
</div>

Mejores Prácticas Recomendado

Section titled “Mejores Prácticas ”

1. Rendimiento

Section titled “1. Rendimiento”
<!-- Usar animaciones ligeras para elementos frecuentes -->
<div class="animate-fade-in">
  Contenido frecuente
</div>


<!-- Reservar animaciones complejas para eventos importantes -->
<div class="animate-bounce-in-scale">
  Contenido destacado
</div>

2. Accesibilidad

Section titled “2. Accesibilidad”
<!-- Respetar preferencias de movimiento reducido -->
<div class="
  motion-safe:animate-slide-in
  motion-reduce:opacity-100
">
  Contenido accesible
</div>

3. Responsive

Section titled “3. Responsive”
<div class="
  animate-fade-in
  sm:animate-slide-in
  md:animate-bounce-in
">
  Adaptativo
</div>
🐝