Animations Tailwind : classes natives et keyframes personnalisées
Guide des animations Tailwind
Animations Tailwind : classes natives et keyframes personnalisées | We.Inc
Voyez animate-spin, ping, pulse et bounce en action avec leur CSS exact, puis ajoutez des keyframes personnalisées dans Tailwind v4 avec @theme, grâce à un générateur de keyframes et des conseils sur la réduction des animations.
Tailwind fournit quatre animations prêtes à l'emploi : animate-spin pour les indicateurs de chargement, animate-ping pour les pastilles de notification, animate-pulse pour les écrans squelettes et animate-bounce pour inviter à défiler, plus animate-none pour les arrêter. En v4, vous ajoutez les vôtres en déclarant une variable --animate-name et ses @keyframes dans @theme, ce qui crée une classe animate-name.
Utilitaires d'animation natifs de Tailwind v4
Classe
Valeur
Usage courant
spin 1s linear infinite
Indicateurs de chargement
ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
Badges en direct ou non lus
pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
Blocs squelettes
bounce 1s infinite
Flèches invitant à défiler
animation: none
Désactiver une animation à un breakpoint ou dans un état
Chaque animation native ci-dessous tourne en direct, à côté des keyframes que Tailwind génère pour elle. Créez ensuite la vôtre : choisissez le mouvement, le timing et le nombre de répétitions, puis copiez un bloc @theme prêt à l'emploi pour Tailwind v4, ou la configuration équivalente pour les anciens projets en v3.
Observez les quatre animations natives et copiez la classe dont vous avez besoin.
Activez l'aperçu de réduction des animations pour voir ce que font motion-safe et motion-reduce.
Utilisez le générateur de keyframes pour choisir un mouvement, une durée, un easing et un nombre de répétitions.
Collez le bloc @theme généré dans le fichier CSS qui importe Tailwind, puis utilisez la nouvelle classe.
Enveloppez les mouvements décoratifs dans motion-safe: pour que les personnes qui demandent moins de mouvement à leur système ne les voient pas.
Animez transform et opacity. Animer width, height ou top force un recalcul de la mise en page à chaque image.
Utilisez animate-[name_duration_easing] pour une valeur ponctuelle ; les underscores remplacent les espaces entre les crochets.
Pour le survol et les changements d'état, un utilitaire de transition vaut généralement mieux qu'une animation à keyframes.
Gardez les animations d'entrée courtes, autour de 150 à 300 millisecondes, pour que la page ne paraisse jamais lente.
Questions fréquentes
Comment ajouter une animation personnalisée dans Tailwind v4 ?
Dans @theme de votre fichier CSS principal, déclarez --animate-wiggle: wiggle 1s ease-in-out infinite; et placez la règle @keyframes wiggle dans le même bloc @theme. Tailwind génère alors une classe animate-wiggle utilisable partout.
Où sont passées les keyframes de tailwind.config.js en v4 ?
La v4 se configure en CSS, donc theme.extend.keyframes et theme.extend.animation deviennent des @keyframes et des variables --animate-* dans @theme. Une configuration JavaScript fonctionne toujours si vous la chargez avec la directive @config, ce qui aide pendant une migration.
Comment faire jouer une animation une seule fois ?
Retirez infinite de la valeur, et ajoutez forwards si l'élément doit rester sur la dernière image, par exemple --animate-fade-in: fade-in 0.3s ease-out forwards. Pour un usage ponctuel, vous pouvez aussi écrire animate-[fade-in_0.3s_ease-out_forwards].
Tailwind respecte-t-il automatiquement les réglages de réduction des animations ?
Non. Les variantes motion-safe: et motion-reduce: correspondent à la media query prefers-reduced-motion, mais c'est à vous de les appliquer. Un schéma courant est motion-safe:animate-bounce, qui n'anime que pour les personnes n'ayant pas demandé de réduction des animations.
À quoi sert chaque animation native
Spin fait tourner un élément d'un tour complet chaque seconde et convient aux indicateurs de chargement circulaires. Ping agrandit une copie d'un point jusqu'à deux fois sa taille tout en la faisant disparaître, ce qui évoque une impulsion de radar ; placez-le sur un span en position absolue derrière un point plein.
Pulse fait descendre l'opacité à la moitié puis remonter en deux secondes, l'aspect standard des blocs squelettes gris pendant le chargement du contenu. Bounce soulève un élément d'un quart de sa hauteur puis le laisse retomber, ce qui fonctionne pour une flèche unique invitant à défiler, et rarement ailleurs.
Keyframes personnalisées en v4
Tailwind v4 a déplacé la configuration dans le CSS. Toute variable de l'espace de noms --animate-* dans @theme devient un utilitaire animate-*, et les @keyframes écrites dans le même bloc sont générées avec. Rien d'autre n'a besoin d'être déclaré.
Gardez exactement le même nom dans la variable et dans @keyframes. Une différence produit une classe qui définit une animation pointant vers des keyframes inexistantes : rien ne bouge et aucune erreur n'apparaît.
Mouvement et accessibilité
Les mouvements amples, répétitifs ou en parallaxe peuvent provoquer un malaise chez certaines personnes. Les systèmes d'exploitation proposent un réglage de réduction des animations, et les navigateurs le transmettent au CSS sous la forme prefers-reduced-motion.
Les indicateurs de chargement qui communiquent un état peuvent garder une version douce, tandis que les rebonds décoratifs et les effets accrocheurs doivent s'arrêter. Testez avec le réglage activé, ou avec l'option d'émulation des outils de développement de votre navigateur.
Le CSS derrière les classes natives
Les keyframes générées par Tailwind v4
Chaque classe animate-* définit animation sur une variable du thème ; voici les valeurs et keyframes par défaut.
Animations personnalisées en v4 et v3
Tailwind v4 : @theme dans votre CSS
Ceci crée animate-wiggle et animate-fade-up. Utilisez-les directement comme noms de classe.
L'ancienne configuration JavaScript, pour les projets qui ne sont pas encore passés à la v4.
Les utiliser dans le balisage
Valeurs arbitraires, référence à une variable, et motion-safe pour que le mouvement respecte le réglage du système.
Keyframes personnalisées en direct
Wiggle, fade up et une carte squelette
Équivalents en CSS pur des classes personnalisées ci-dessus, pour modifier le timing et voir le résultat changer.
Les animations natives, en direct
Chaque aperçu utilise la vraie classe Tailwind. Activez l'aperçu de réduction des animations pour voir motion-safe à l'œuvre.
Aperçu de réduction des animations : activé
Aperçu de réduction des animations : désactivé
Générateur de keyframes
Choisissez un mouvement, une durée, un easing et un nombre de répétitions, puis copiez le bloc @theme pour Tailwind v4.