Keyframes Config

Tailwind CSS 🟡 Mid

Definition

Configuration des keyframes CSS dans tailwind.config.js pour creer des animations custom utilisables via la classe animate-*.

Analogie

Ecrire le script d'une scene de film, puis dire a l'acteur de la jouer avec animate-*.

Exemple de code

// tailwind.config.js
theme: {
  extend: {
    keyframes: {
      fadeIn: {
        '0%': { opacity: '0' },
        '100%': { opacity: '1' }
      }
    },
    animation: { fadeIn: 'fadeIn 0.5s ease-in-out' }
  }
}

Cas d'usage

Creer des animations d'entree/sortie custom pour les modals, toasts, et notifications.

Termes lies

#styling#tailwind