Animations personnalisées dans la configuration
Définissez des images clés et des utilitaires d’animation personnalisés dans tailwind.config.js, puis utilisez-les avec des classes animate-* dans votre balisage.
Animations personnalisées dans la configuration est une leçon Tailwind CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Tailwind CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Au-delà des quatre animations intégrées
Les quatre animations intégrées de Tailwind couvrent les modèles courants de chargement et d’attention, mais les projets réels nécessitent souvent des animations supplémentaires : effets d’apparition progressive pour l’arrivée du contenu, barres latérales coulissantes, effets de tremblement pour les erreurs de formulaire ou variantes personnalisées de pulsation. En ajoutant des entrées à theme.extend.keyframes et theme.extend.animation dans votre configuration, vous créez de nouveaux utilitaires animate-* qui fonctionnent exactement comme ceux intégrés.
Définir des images clés personnalisées
Ajoutez des images clés CSS personnalisées dans theme.extend.keyframes. Chaque clé de l’objet devient un nom d’image clé. La valeur est un objet dont les clés sont des chaînes représentant des pourcentages ou les mots-clés 'from'/'to', et dont les valeurs sont des objets de propriétés CSS. Tailwind convertit cette notation d’objet en règle CSS @keyframes dans le résultat compilé. Vous pouvez utiliser toute propriété CSS animable dans les étapes des images clés.
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
// Fade in from transparent
'fade-in': {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
// Slide up from below
'slide-up': {
'0%': { opacity: '0', transform: 'translateY(16px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
// Shake (for errors)
'shake': {
'0%, 100%': { transform: 'translateX(0)' },
'20%, 60%': { transform: 'translateX(-8px)' },
'40%, 80%': { transform: 'translateX(8px)' },
},
},
},
},
};Enregistrer des utilitaires d’animation personnalisés
Après avoir défini les images clés, enregistrez-les comme animations nommées dans theme.extend.animation. La valeur est une chaîne abrégée d’animation CSS : name duration timing-function delay iteration-count direction fill-mode. Le nom doit correspondre à une image clé définie dans theme.extend.keyframes. Tailwind génère une classe utilitaire animate-{key} pour chaque entrée.
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: { /* ... defined above ... */ },
animation: {
'fade-in': 'fade-in 0.3s ease-out',
'slide-up': 'slide-up 0.4s ease-out',
'shake': 'shake 0.5s ease-in-out 1',
// Multiple values
'fade-in-slow': 'fade-in 1s ease-in-out',
// Infinite loop
'fade-in-out': 'fade-in 1.5s ease-in-out infinite alternate',
},
},
},
};Utiliser des animations personnalisées dans HTML
Une fois enregistrées dans la configuration, les animations personnalisées sont disponibles sous forme de classes animate-{key} dans votre HTML. Elles fonctionnent exactement comme les utilitaires d’animation intégrés et peuvent être combinées avec des préfixes responsifs, des variantes d’état et la variante motion-reduce: pour l’accessibilité. L’animation se déclenche lorsque la classe est présente et s’arrête lorsqu’elle est supprimée — ce qui est idéal pour les effets d’apparition déclenchés par JavaScript.
<!-- Fade in a card on page load -->
<div class="animate-fade-in bg-white rounded-xl p-6 shadow">
Content fades in smoothly
</div>
<!-- Slide up with a slight delay using inline style -->
<div class="animate-slide-up" style="animation-delay: 150ms">
Content slides up after 150ms delay
</div>
<!-- Shake an input on validation error -->
<input
id="email"
class="border border-red-500 animate-shake focus:outline-none px-4 py-2 rounded-lg w-full"
type="email"
placeholder="Invalid email"
/>Animations d’apparition du contenu
Les animations d’apparition (fondu entrant, glissement vers le haut, agrandissement) donnent vie au contenu au moment où il apparaît. Elles sont particulièrement efficaces lorsque le contenu entre pour la première fois dans la fenêtre d’affichage, au chargement de la page ou lorsqu’une section devient visible pendant le défilement. Limitez la durée des apparitions à 200–400 ms et associez-les toujours à une fonction d’accélération appropriée. Utilisez l’API Intersection Observer en JavaScript pour déclencher les animations lorsque les éléments apparaissent dans la fenêtre d’affichage pendant le défilement.
// JavaScript: trigger animation when element enters viewport
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-slide-up');
observer.unobserve(entry.target); // animate once
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.animate-on-scroll').forEach((el) => {
observer.observe(el);
});
<!-- HTML: starts invisible, gets class on scroll -->
<div class="opacity-0 animate-on-scroll">Animated on scroll</div>Exemples de trames clés plus complexes
Les animations complexes utilisent davantage d’étapes en pourcentage dans leurs trames clés afin de créer un mouvement en plusieurs phases. Une animation de battement de cœur agrandit puis réduit l’élément selon un rythme à deux battements. Une animation de flash met brièvement un élément en évidence avec une couleur d’arrière-plan. Une animation de glissement vers la droite translate et fait disparaître progressivement l’élément en même temps. Ces animations composées nécessitent plusieurs étapes en pourcentage pour décrire précisément chaque phase du mouvement.
// tailwind.config.js
keyframes: {
'heartbeat': {
'0%, 100%': { transform: 'scale(1)' },
'14%': { transform: 'scale(1.3)' },
'28%': { transform: 'scale(1)' },
'42%': { transform: 'scale(1.3)' },
'70%': { transform: 'scale(1)' },
},
'flash': {
'0%, 50%, 100%': { opacity: '1' },
'25%, 75%': { opacity: '0.25' },
},
'slide-in-right': {
'0%': { opacity: '0', transform: 'translateX(32px)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
},
animation: {
'heartbeat': 'heartbeat 1.2s ease-in-out infinite',
'flash': 'flash 0.5s ease-in-out',
'slide-in-right': 'slide-in-right 0.3s ease-out',
}Mode de remplissage de l’animation
La propriété CSS animation-fill-mode contrôle ce qui se passe avant le début de l’animation, s’il y a un délai, et après sa fin. forwards maintient l’élément dans son état final une fois l’animation terminée — ce qui est essentiel pour les animations d’apparition exécutées une seule fois lorsque vous souhaitez que l’élément reste visible. backwards applique la première image pendant la période de délai afin que les éléments commencent dans leur état initial correct. Incluez le mode de remplissage dans votre chaîne abrégée d’animation.
// animation shorthand: name | duration | easing | delay | count | fill-mode
animation: {
// 'forwards' keeps final state (element stays visible after fading in)
'fade-in': 'fade-in 0.3s ease-out forwards',
// 'backwards' applies frame-0 during delay (starts transparent during delay)
'fade-in-delayed': 'fade-in 0.4s ease-out 0.2s backwards',
// No fill mode: jumps back to initial state after animation
'shake': 'shake 0.5s ease-in-out',
}Mettre en pause et reprendre les animations
Vous pouvez mettre en pause une animation Tailwind avec animation-play-state: paused. Ajoutez une classe utilitaire personnalisée ou utilisez une valeur arbitraire : [animation-play-state:paused]. Cette technique est utile pour mettre en pause les animations de chargement lorsqu’une page n’est pas visible, à l’aide de l’API de visibilité des pages, ou pour mettre en pause les animations au survol afin de laisser aux utilisateurs le temps d’interagir avec le contenu. Tailwind ne fournit pas d’utilitaire de pause intégré, mais du CSS arbitraire ou un utilitaire personnalisé permet de couvrir ce besoin.
@layer utilities {
.animation-paused { animation-play-state: paused; }
.animation-running { animation-play-state: running; }
}
<!-- Pause animation on hover -->
<div class="animate-pulse hover:animation-paused bg-gray-200 rounded h-4 w-48">
Pauses pulsing when hovered
</div>
<!-- JavaScript: pause when page is hidden -->
document.addEventListener('visibilitychange', () => {
const spinners = document.querySelectorAll('.animate-spin');
spinners.forEach(el => {
el.style.animationPlayState = document.hidden ? 'paused' : 'running';
});
});Respecter la réduction des mouvements dans les animations personnalisées
Toute animation personnalisée que vous créez devrait également prévoir un traitement motion-reduce:. L’approche la plus simple consiste à utiliser motion-reduce:animate-none pour désactiver entièrement l’animation. Pour les animations d’apparition dont vous souhaitez tout de même afficher l’état final, utilisez motion-reduce:opacity-100 avec motion-reduce:animate-none afin de garantir que l’élément reste visible même lorsque l’animation de fondu entrant est ignorée.
<!-- Accessible entrance animation -->
<div
class="
opacity-0 animate-fade-in
motion-reduce:opacity-100 motion-reduce:animate-none
"
>
Content visible immediately for reduced-motion users,
fades in for others
</div>
<!-- Accessible slide-up -->
<div
class="
opacity-0 translate-y-4 animate-slide-up
motion-reduce:opacity-100 motion-reduce:translate-y-0 motion-reduce:animate-none
"
>
Reduced motion: appears instantly at final position
</div>Bibliothèques d’animation tierces avec Tailwind
Pour des animations plus sophistiquées — physique des ressorts, animations pilotées par le défilement ou chorégraphies complexes — des bibliothèques tierces comme tailwindcss-animate, Framer Motion (React) ou GSAP s’intègrent bien à Tailwind. Tailwindcss-animate fournit un riche ensemble de trames clés prédéfinies (accordion-down, accordion-up, fade-in, etc.) sous forme de plugin, ce qui étend instantanément les utilitaires animate-* disponibles. Il est utilisé par défaut dans les composants shadcn/ui.
// Install tailwindcss-animate
// npm install tailwindcss-animate
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-animate'),
],
};
<!-- Now you have many new animate-* utilities -->
<div class="animate-in fade-in slide-in-from-bottom-4 duration-300">
Animated with tailwindcss-animate
</div>
<div class="animate-out fade-out slide-out-to-top-4 duration-200">
Exit animation
</div>Déboguer les animations personnalisées
Utilisez le panneau Animations de Chrome DevTools pour examiner et déboguer les animations personnalisées. Sélectionnez l’élément dans le panneau Éléments, puis ouvrez le panneau Animations. Lancez l’animation : vous verrez la courbe des trames clés représentée visuellement avec des repères temporels. Vous pouvez ralentir la lecture à 0,25× pour examiner attentivement chaque étape. Le panneau vous permet également de rejouer les animations à la demande, ce qui est bien plus simple que d’actualiser la page pour intercepter les animations d’apparition.
Vérification rapide
Vérifiez votre compréhension des animations personnalisées dans la configuration Tailwind.
Récapitulatif de la leçon
Dans cette leçon, vous avez appris à définir des trames clés personnalisées dans theme.extend.keyframes et à les enregistrer comme utilitaires dans theme.extend.animation, à utiliser animation fill-mode forwards pour les animations d’apparition exécutées une seule fois qui doivent conserver leur état final, et à toujours associer les animations personnalisées à motion-reduce:animate-none pour l’accessibilité. Le cours sur les animations et les transitions est maintenant terminé — nous allons ensuite créer des modèles de composants soignés.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 30
- Leçons
- 120
Questions Fréquemment Posées
La leçon « Animations personnalisées dans la configuration » est-elle gratuite ?
Oui — le texte complet de « Animations personnalisées dans la configuration » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Tailwind CSS Academy, passe à CoddyKit PRO. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Animations personnalisées dans la configuration » ?
Définissez des images clés et des utilitaires d’animation personnalisés dans tailwind.config.js, puis utilisez-les avec des classes animate-* dans votre balisage. Tu pratiques Tailwind CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Tailwind CSS Academy ?
Aucune expérience préalable n'est requise. Tailwind CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Animations personnalisées dans la configuration » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Tailwind CSS Academy ?
Oui. Chaque leçon Tailwind CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Utilitaires de transition
- Durée et fonction d’accélération
- Animations d’images clés intégrées
- Animations personnalisées dans la configuration