josiahsiegel/tailwindcss-animations

Que fait tailwindcss-animations ?

Animations et transitions Tailwind CSS incluant les utilitaires intégrés et les keyframes personnalisés. Activez proactivement pour :

1. Les utilitaires animate-* (spin, ping, pulse, bounce)
2. Les @keyframes personnalisés via @theme animate
3. Les utilitaires de transition (transition, duration, ease)
4. Les transformations (scale, rotate, translate) avec transition
5. prefers-reduced-motion: reduce
6. L'intégration Framer Motion / Motion One avec Tailwind
7. Les animations CSS basées sur le défilement (animation-timeline)
8. L'API View Transitions avec Tailwind
9. Les transitions au survol (hover), focus (focus), et groupe (group-hover)
10. Les animations de liste décalées

Fournit : une référence des utilitaires d'animation, des exemples de keyframes personnalisés, un modèle de mouvement réduit, une intégration Framer Motion et des recettes d'animations basées sur le défilement.

Utilitaire de référence animate-*

/* Exemples d'utilisation des classes animate-* */
<div class="animate-spin">Chargement...</div>
<div class="animate-ping">Nouveau</div>
<div class="animate-pulse">En direct</div>
<div class="animate-bounce">Défiler vers le bas</div>

Keyframes personnalisés via @theme

/* Dans votre fichier CSS principal ou @layer */
@theme {
  --animate-fade-in: fade-in 0.5s ease-in-out;
  --animate-slide-up: slide-up 0.3s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

Utilitaires de transition

<div class="transition-all duration-300 ease-in-out hover:scale-105">
  Passage au survol
</div>

Gestion du mouvement réduit

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Intégration Framer Motion avec Tailwind

import { motion } from 'framer-motion';

<motion.div
  initial={{ opacity: 0, scale: 0.5 }}
  animate={{ opacity: 1, scale: 1 }}
  transition={{ duration: 0.5 }}
  className="bg-blue-500 p-4 rounded-lg"
>
  Animation avec Framer Motion et Tailwind
</motion.div>

Animations basées sur le défilement

.card {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes fade-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

API View Transitions avec Tailwind

// Activation dans le cadre des transitions de vue
if (document.startViewTransition) {
  document.startViewTransition(() => updateDOM());
}

/* Personnalisation des transitions de vue */
@keyframes slide-out {
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

::view-transition-old(root) {
  animation: slide-out 0.3s ease-out;
}

::view-transition-new(root) {
  animation: slide-in 0.3s ease-in;
}

Animations de liste décalées

<ul>
  {items.map((item, index) => (
    <li
      key={item.id}
      className="animate-fade-in"
      style={{ animationDelay: `${index * 100}ms` }}
    >
      {item.name}
    </li>
  ))}
</ul>

Exemple complet : transition au survol et focus

<button class="transition-transform duration-200 hover:scale-110 focus:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-500">
  Cliquez-moi
</button>

Ressources supplémentaires

• Documentation officielle Tailwind CSS : Animation
• Documentation Framer Motion
• CSS scroll-driven animations sur MDN
• API View Transitions sur MDN

---

Cette compétence est maintenue par josiahsiegel. Proposez des améliorations ou signalez des problèmes via le dépôt GitHub correspondant.