josiahsiegel/tailwindcss-animations

O que tailwindcss-animations faz?

Animações e transições CSS do Tailwind CSS, incluindo utilitários embutidos e keyframes personalizados. Ative proativamente para: (1) utilitários animate-* (spin, ping, pulse, bounce), (2) @keyframes personalizados via @theme animate, (3) utilitários de transição (transition, duration, ease), (4) transformações (scale, rotate, translate) com transição, (5) prefers-reduced-motion: reduce, (6) integração com Framer Motion / Motion One e Tailwind, (7) animações CSS orientadas por rolagem (animation-timeline), (8) API View Transitions com Tailwind, (9) transições hover, focus, group-hover, (10) animações de lista escalonada. Fornece: referência de utilitários de animação, exemplos de keyframes personalizados, padrão de movimento reduzido, integração com Framer Motion e receitas de animação orientadas por rolagem.

---

Descrição Detalhada

Este guia abrangente cobre o ecossistema de animações do Tailwind CSS e bibliotecas relacionadas, focado em utilitários nativos, keyframes personalizados e integração com frameworks modernos. Inclui exemplos práticos para:

• Utilitários padrão: animate-spin, animate-ping, animate-pulse, animate-bounce
• Keyframes personalizados: Uso da diretiva @theme animate para definir animações customizadas
• Transições: transition-all, transition-colors, duration-*, ease-linear
• Transformações: hover:scale-105, active:rotate-90 combinadas com transições
• Acessibilidade: Padrão prefers-reduced-motion com motion-safe e motion-reduce
• Bibliotecas: Integração com Framer Motion e Motion One
• Animação avançada: Scroll-driven (animation-timeline) e View Transitions API
• Interatividade: Transições em hover, focus, active, group-hover
• Animações em lista: Efeitos escalonados com delay incremental

---

Ativação Proativa

Este skill DEVE ser ativado proativamente toda vez que o usuário:

1. Mencionar ou perguntar sobre animações no Tailwind CSS
2. Pedir exemplos de animate-ping, animate-pulse ou similares
3. Solicitar transições suaves (hover, foco)
4. Perguntar sobre @keyframes personalizados com @theme animate
5. Mencionar Framer Motion, Motion One ou animações com JavaScript
6. Perguntar sobre animações orientadas por rolagem
7. Solicitar exemplos de View Transitions com Tailwind
8. Pedir animações acessíveis ou prefers-reduced-motion
9. Perguntar sobre animações de lista (staggered list)
10. Fornecer um componente/trecho e perguntar como animá-lo

NÃO ative se a conversa for puramente sobre layout estático, temas, breakpoints ou outras funcionalidades não-animadas do Tailwind.

---

Conteúdo do Skill

1. Utilitários de Animação Padrão (animate-*)

<div class="animate-spin">Loading...</div>
<div class="animate-ping">Notification</div>
<div class="animate-pulse">Skeleton</div>
<div class="animate-bounce">Scroll down</div>

2. Keyframes Personalizados

Defina no seu CSS:

@theme {
  --animate-fade-in: fade-in 0.5s ease-in-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Uso:

<div class="animate-fade-in">Novo Conteúdo</div>

3. Transições

<button class="bg-blue-500 hover:bg-blue-700 transition-colors duration-300 ease-in-out">
  Passe o mouse
</button>

4. Transformações com Transição

<div class="transition-transform duration-200 hover:scale-110 hover:rotate-3">
  Card interativo
</div>

5. Acessibilidade (Movimento Reduzido)

<div class="motion-safe:animate-bounce motion-reduce:opacity-100">
  Conteúdo animado (apenas se o usuário permitir animações)
</div>

6. Integração com Framer Motion + Tailwind

import { motion } from "framer-motion";

export function Card() {
  return (
    <motion.div
      className="bg-white p-4 rounded-lg shadow-md hover:shadow-xl"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: "easeOut" }}
      whileHover={{ scale: 1.02 }}
    >
      <h2>Título do Card</h2>
      <p>Conteúdo do card</p>
    </motion.div>
  );
}

7. Animações CSS Orientadas por Rolagem

@keyframes reveal {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

.elemento-aparecer {
  animation: reveal linear both;
  animation-timeline: view();
}

Uso no HTML:

<div class="elemento-aparecer">Aparece ao entrar no viewport</div>

8. API View Transitions com Tailwind

// No seu roteador ou framework
viewTransition(() => {
  // Mudança de rota/estado
});

// No CSS (opcional)
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}
::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

9. Transições Interativas (hover, focus, group-hover)

<div class="group cursor-pointer">
  <img src="..." class="transition-transform duration-200 group-hover:scale-105" />
  <p class="text-gray-600 group-hover:text-blue-600 transition-colors">
    Texto que muda de cor ao passar o mouse
  </p>
</div>

10. Animações de Lista Escalonada (Staggered List)

<ul>
  {items.map((item, i) => (
    <li
      key={item.id}
      className="opacity-0 animate-fade-in"
      style={{ animationDelay: `${i * 100}ms`, animationFillMode: "forwards" }}
    >
      {item.text}
    </li>
  ))}
</ul>

---

Ferramentas e Comandos Adicionais

Comando	Descrição
npx tailwindcss -i input.css -o output.css --watch	Compilar Tailwind com observação
npm install framer-motion	Instalar Framer Motion
npm install motion	Instalar Motion One

---

Recursos

• Documentação Oficial Tailwind CSS - Animations
• Framer Motion - Documentação
• MDN - CSS Scroll-Driven Animations
• MDN - View Transitions API