Animate & Transition

Tailwind CSS 🟢 Junior

Définition

Classes animate-* pour les animations prédéfinies (spin, ping, pulsé, bounce) et transition-* pour les transitions CSS avec durée et easing configurables.

Analogie

animate c'est une chorégraphie complète, transition c'est juste un fondu entre deux poses.

Exemple de code

<div class="animate-spin h-8 w-8 border-4
  border-blue-500 rounded-full border-t-transparent">
</div>
<button class="transition-all duration-300 ease-in-out
  hover:scale-105 hover:shadow-lg">Bouton</button>

Cas d'usage

Ajouter du mouvement subtil aux interactions utilisateur (loading spinners, hover effects).

#styling#tailwind

← → au clavier pour passer d'une fiche à l'autre