Générateur d'animations CSS, gratuit

Comment utiliser

1. Choisissez un préréglage d'animation : sélectionnez parmi les animations courantes, fondu, glissement, rebond, rotation, pulsation, secousse et plus.
2. Personnalisez la durée et le comportement : ajustez durée, délai, fonction d'easing, nombre d'itérations et fill mode.
3. Copiez le CSS : la définition @keyframes complète et la propriété raccourcie animation sont prêtes à coller dans votre feuille de style.

Pourquoi utiliser le générateur d'animations CSS ?

Les animations CSS font vivre les interfaces, attirant l'attention sur les éléments clés, donnant un retour visuel et créant des expériences utilisateur soignées. Écrire des règles @keyframes à la main exige de connaître la bonne syntaxe, les noms de courbes et les bonnes combinaisons de propriétés. Ce générateur propose des préréglages d'animation soignés avec aperçu en direct et vous laisse ajuster chaque paramètre, produisant du CSS prêt pour la production sans JavaScript ni bibliothèque d'animation.

Fonctionnalités

• Préréglages d'animation : fondu, glissement, rebond, rotation, pulsation, secousse, retournement, zoom, etc., tous avec aperçu en direct.
• Éditeur d'images-clés personnalisé : construisez votre propre animation de zéro avec une interface visuelle.
• Contrôle du timing : réglez durée (ms/s), délai, courbe (linear, ease, cubic-bezier) et nombre d'itérations.
• Modes de remplissage : contrôlez les comportements forwards, backwards, both et none.
• Aucun JavaScript nécessaire : toutes les animations générées sont en CSS pur, pas de bibliothèque ni de framework.

Questions fréquentes

Quelle est la différence entre animation et transition en CSS ?

Les transitions CSS se déclenchent sur des changements d'état (survol, focus, bascule de classe) et animent entre deux états. Les animations CSS utilisent @keyframes pour définir plusieurs états et tournent indépendamment de l'interaction utilisateur, elles peuvent boucler, s'inverser et démarrer automatiquement.

Qu'est-ce qu'animation-fill-mode et pourquoi est-ce important ?

animation-fill-mode contrôle si l'élément conserve les styles de l'animation avant qu'elle ne commence (backwards), après qu'elle s'est terminée (forwards), ou les deux. Sans forwards, l'élément revient brusquement à son style d'origine à la fin de l'animation.

Les animations CSS sont-elles performantes ?

Les animations qui n'utilisent que transform et opacity sont accélérées par le GPU et très fluides. Évitez d'animer des propriétés de mise en page comme width, height, margin ou top/left, elles déclenchent des recalculs de layout et peuvent causer des saccades. Restez sur transform et opacity pour du 60 i/s.

Ce que les animations CSS font vraiment

Les animations CSS interpolent une ou plusieurs propriétés CSS entre des images-clés définies dans le temps, produisant un mouvement ou un changement visible sans JavaScript. Le modèle a deux pièces : les règles @keyframes définissent à quoi ressemble une animation à des étapes basées sur des pourcentages (0% à 100%), et la propriété raccourcie animation (ou ses cousines longhand animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-fill-mode) dit au navigateur comment jouer cette définition de keyframes. Le navigateur gère toute l’interpolation, l’atténuation et le timing des images en C++, généralement accéléré par GPU pour les changements de transform et d’opacité.

Les animations diffèrent des transitions CSS de deux manières. Les transitions se déclenchent lorsque l’état d’un élément change (un survol, une bascule de classe, un événement de focus) et interpolent entre exactement deux valeurs : l’ancienne et la nouvelle. Les animations s’exécutent indépendamment de l’état, suivent un nombre arbitraire d’étapes de keyframes, peuvent boucler indéfiniment, peuvent jouer en sens inverse, et peuvent être déclenchées, mises en pause et reprises via CSS ou JavaScript. Les transitions sont le bon outil pour « passer de A à B en une demi-seconde » ; les animations sont le bon outil pour « boucler cette pulsation attire-attention pour toujours » ou « jouer cette séquence d’entrée une fois quand l’élément apparaît ».

Pour le design web moderne, les animations CSS remplacent une énorme quantité de ce qui nécessitait des bibliothèques JavaScript. Les spinners, les fondus, les glissements vers le haut, les pulsations d’attention, les coches de succès : tous sont maintenant des modèles CSS standards. Le compromis est l’expressivité pour les séquences complexes. Les animations CSS peuvent faire beaucoup mais cessent d’être pratiques autour de 5 à 7 étapes de keyframes avec des changements de propriétés synchronisés ; pour les animations storyboardées, les séquences liées au défilement, ou tout ce qui est dynamique dépendant de l’état JavaScript, les bibliothèques dédiées (GSAP, Framer Motion, Web Animations API) restent le meilleur choix.

Comment cet outil fonctionne en coulisses

Lorsque vous choisissez un préréglage (par ex. « bounce » ou « fade-in »), l’outil charge une chaîne de @keyframes prédéfinie dans la zone d’aperçu et applique la propriété d’animation à la boîte d’aperçu. Les keyframes sont du vrai CSS, pas un format personnalisé : ce que vous voyez est ce que vous obtenez à copier. Les curseurs mettent à jour les valeurs de timing d’animation (durée, délai, nombre d’itérations) en éditant la propriété animation inline en temps réel, donc l’aperçu reflète chaque changement instantanément sans rechargement de page.

La sélection de la fonction d’atténuation utilise les valeurs CSS standards de timing-function : linear (vitesse constante), ease (par défaut, début et fin lents), ease-in (début lent), ease-out (fin lente), ease-in-out (début et fin lents), ou cubic-bezier(x1, y1, x2, y2) pour des courbes personnalisées. La courbe d’animation visible est calculée par l’implémentation native de timing-function du navigateur ; l’aperçu est la sortie réellement rendue par le navigateur, pas une simulation JavaScript.

La boîte de code montre le CSS complet dont vous avez besoin pour déposer dans une feuille de style : à la fois le bloc @keyframes et la déclaration .votre-classe { animation: ... }. Cliquez sur « Copier CSS » et les deux sont écrits dans votre presse-papiers comme un seul bloc de texte. Aucun fichier n’est généré, aucun serveur ne traite quoi que ce soit, et l’outil n’a pas de backend à appeler. L’aperçu, la génération de code et l’écriture dans le presse-papiers se passent tous en JavaScript sur votre appareil. Rafraîchissez la page et votre configuration personnalisée est partie sauf si vous l’avez copiée d’abord.

Brève histoire de l’animation web

• Flash domine le mouvement web, 1996 à 2010.Adobe Flash (à l’origine Macromedia) est l’outil principal pour l’animation web tout au long du début des années 2000. Basé sur des vecteurs, piloté par timeline, avec un runtime de plugin personnalisé. En 2010, Flash alimente la plupart des publicités bannières, le lecteur vidéo YouTube et les jeux de l’ère Newgrounds. Puis les appareils mobiles le tuent : l’iPhone n’a jamais supporté Flash, Android abandonne le support en 2012, les navigateurs déprécient le plugin d’ici 2020.
• Transitions CSS dans WebKit, 2007.Le moteur WebKit d’Apple livre -webkit-transition en 2007, la première primitive d’animation CSS communément déployée. Largement utilisée dans les premières applications web iPhone. D’ici 2009, la propriété est dans le processus de spécification CSS et est livrée sans préfixe à travers les navigateurs d’ici 2014.
• Module CSS Animations Niveau 1, 2009.WebKit ajoute -webkit-animation et @-webkit-keyframes en mars 2009 avant le brouillon du W3C CSS Animations Module Niveau 1 (également 2009). Firefox suit en version 5 (2011), IE en version 10 (2012). L’ère « pas besoin de JavaScript pour les animations de base » commence.
• GSAP et bibliothèques d’animation JS, à partir de 2008.La méthode .animate() de jQuery (2006) lance l’ère des bibliothèques d’animation JS ; GreenSock Animation Platform (GSAP, lancé en 2008) devient l’étalon-or pour l’animation séquencée complexe, le scrubbing de timeline et la performance. Utilisé dans Disney, Coca-Cola et les sites marketing de niveau Awwwards. Continue à coexister avec les animations CSS : GSAP pour la complexité séquencée, CSS pour la simplicité déclarative.
• Web Animations API standardisée, 2014 à 2018.La spécification W3C Web Animations fournit une API JavaScript qui expose les animations CSS et ajoute un contrôle programmatique : element.animate(keyframes, options). Chrome livre en version 36 (2014), Firefox en version 75 (2020), Safari en version 13.1 (2020). Comble le fossé entre le CSS déclaratif et la puissance complète des bibliothèques JavaScript.
• Les animations pilotées par le défilement atterrissent, 2023 à 2024.Le module CSS Scroll-driven Animations introduit animation-timeline, permettant aux animations CSS de se lier à la position de défilement au lieu de (ou en plus de) du temps. Chrome 115 (juillet 2023) livre en premier ; Safari et Firefox ajoutent le support à travers 2024 et 2025. Débloque les effets parallaxes, les indicateurs de progression de défilement et les animations de révélation de section en CSS pur.

Flux du monde réel

• Spinners de chargement et états squelette.Un chargeur tournant (animation: spin 1s linear infinite avec une keyframe de rotation de 360 degrés) est l’utilisation d’animation CSS la plus courante. Les écrans squelette avec un effet shimmer glissant utilisent une animation translateX ou background-position. Les deux sont essentiels pour la performance perçue : pendant que le contenu se charge, l’animation dit aux utilisateurs « nous travaillons dessus » plutôt que « c’est cassé ».
• Micro-interactions de survol et de focus.Des boutons qui pulsent subtilement au survol, des cartes qui se soulèvent au focus, des icônes qui vibrent au clic : ces micro-interactions ajoutent de la personnalité sans intrusivité. Utilisez des animations avec animation-iteration-count: 1 et animation-fill-mode: forwards pour un comportement « jouer une fois et rester », ou des transitions pour les motifs « passer à l’état de survol ».
• Attirer l’attention sur les CTA.Un bouton d’appel à l’action principal avec une pulsation lente et continue ou une animation de respiration-lueur attire l’œil sans être agressif. Combinez transform: scale(1) to scale(1.05) avec animation-iteration-count: infinite et une durée de 3 à 4 secondes pour un rythme respiratoire calme. Évitez les pulsations plus rapides ; elles semblent maniaques et agacent les utilisateurs rapidement.
• Entrée de page et révélation de section.Les animations fade-in et slide-up au chargement de la page ou au scroll-into-view créent des arrivées soignées. CSS gère le cas simple (animations qui se jouent une fois au chargement) ; pour les entrées déclenchées par le défilement, IntersectionObserver en JavaScript ajoute une classe qui déclenche l’animation quand un élément entre dans la fenêtre d’affichage. Les animations pilotées par le défilement modernes commencent à remplacer ce motif en CSS pur.
• Retour de succès et secousses d’erreur.Le retour de soumission de formulaire utilise des indices d’animation : une sauvegarde réussie montre une coche verte avec une brève animation bounce-in, tandis qu’une erreur secoue brièvement le formulaire (keyframes translateX alternant -10px et +10px sur 0,4 seconde). Ces petites touches rendent les interactions réactives et intentionnelles.
• Séquences hero marketing et narration.Les pages d’atterrissage et sections hero utilisent souvent des animations d’entrée échelonnées (le logo s’estompe en entrée, le titre glisse vers le haut, le bouton CTA pulse) pour focaliser l’attention à travers une séquence conçue. Les délais d’animation (animation-delay: 0s, 0.3s, 0.6s) sur trois éléments frères créent un effet décalé sans avoir besoin d’orchestration JavaScript.

Pièges courants et ce qu’ils signifient

• Animer les propriétés de mise en page tue les performances.Les propriétés comme width, height, margin, padding, top, left, right, bottom et font-size déclenchent le recalcul de la mise en page à chaque image d’animation, causant souvent du jank ou des performances en dessous de 60fps. Utilisez transform: translateX() au lieu de left, transform: scale() au lieu de width/height, et opacity au lieu de visibility. Transform et opacity sont composités par GPU et ne déclenchent pas la mise en page.
• Ignorer prefers-reduced-motion nuit à l’accessibilité.Certains utilisateurs ressentent un mal des transports ou des troubles vestibulaires déclenchés par les animations web. La media query prefers-reduced-motion: reduce permet aux utilisateurs de se retirer au niveau OS. Enveloppez vos animations décoratives dans @media (prefers-reduced-motion: no-preference) { ... } ou réglez animation-duration: 0.01ms pour les utilisateurs qui demandent un mouvement réduit. Les animations essentielles (spinners de chargement) peuvent rester, mais les décoratives devraient respecter la préférence.
• L’abus de will-change nuit à la mémoire.La propriété will-change indique au navigateur de promouvoir un élément vers le GPU à l’avance, ce qui peut adoucir les animations. Mais ajouter will-change à beaucoup d’éléments consomme une mémoire GPU significative. Appliquez-la seulement aux éléments que vous animez réellement, idéalement ajoutés via JavaScript juste avant le début de l’animation et supprimés après. Régler will-change: transform sur chaque élément de la page est un antipattern.
• Confusion sur animation-fill-mode.Par défaut, un élément retourne à son style d’origine après la fin d’une animation. Pour conserver l’état final de l’animation, utilisez animation-fill-mode: forwards. Pour démarrer l’élément dans le premier état de l’animation avant que le délai ne s’écoule, utilisez backwards. Pour faire les deux, utilisez both. Beaucoup de bogues « pourquoi mon élément revient-il en arrière ? » viennent du fait de manquer cette propriété. La valeur par défaut est none, ce qui est rarement ce que vous voulez pour des animations d’entrée à coup unique.
• Les animations infinies vident la batterie mobile.Une animation animation-iteration-count: infinite s’exécute pour toujours, gardant le GPU actif et la fréquence de rafraîchissement de l’écran à son maximum. Sur les appareils mobiles, cela vide la batterie de manière notable. Pour les animations continues décoratives (un logo qui respire doucement), envisagez de mettre l’animation en pause quand la page est cachée (document.visibilityState !== 'visible'), ou de limiter le nombre d’itérations à un nombre fini comme 3 à 5 au lieu d’infini.
• Conflits de noms de keyframes à grande échelle.Les noms de règles @keyframes sont globaux dans une feuille de style : @keyframes fade dans un fichier entre en collision avec @keyframes fade dans un autre. Pour les grandes bases de code, namespace vos noms de keyframes (@keyframes app-fade-in, @keyframes hero-slide-up) pour éviter les écrasements silencieux. CSS modules et les bibliothèques CSS-in-JS gèrent cela automatiquement avec le hachage de portée.

Confidentialité : tout s’exécute dans votre navigateur

Les outils générateurs CSS viennent en deux saveurs : pages HTML simples exécutant du JavaScript côté client (privées, rapides) et éditeurs cloud qui sauvegardent vos projets (collaboratifs mais avec des compromis de confidentialité). Cet outil est du premier type. Vos valeurs de curseur, votre préréglage sélectionné, votre CSS généré : tout reste dans votre session navigateur. Rafraîchissez la page et l’état est parti sauf si vous avez copié le CSS d’abord. Aucun serveur ne stocke vos choix d’animation, aucune analyse ne suit quels préréglages vous avez testés, et aucun compte n’est nécessaire.

La propriété de confidentialité compte surtout pour le travail de design propriétaire. Un studio prototypant des animations pour un projet client confidentiel, un développeur travaillant sur les micro-interactions d’une application non annoncée, ou un designer itérant sur une campagne de marque : tout contexte où l’historique d’itération ou le design en cours pourrait fuir des informations sur le travail. Avec cet outil, il n’y a rien de capturé parce que rien n’est envoyé. Ouvrez l’onglet Réseau du navigateur et vous verrez zéro requête sortante pendant l’utilisation ; seul le chargement initial de la page récupère le HTML et JavaScript.

Quand un autre outil est le bon choix

• GSAP pour les animations séquencées complexes.GreenSock Animation Platform (GSAP) gère les animations synchronisées, séquencées et scrubbables bien mieux que le CSS pur. Pour les animations marketing storyboardées, les séquences liées au défilement avec capacité de retour en arrière, ou tout ce qui dépend des changements d’état JavaScript, GSAP est le standard de l’industrie. Gratuit pour la plupart des cas d’utilisation (avec une licence club pour certains plugins).
• Lottie pour les animations conçues par designer.Lottie (à l’origine d’Airbnb) rend les animations After Effects en JSON, permettant aux designers de créer un mouvement complexe dans After Effects et d’exporter directement vers web/iOS/Android. Pour les animations qui dépassent ce que les keyframes codées à la main peuvent pratiquement produire (animations de personnages, morphing complexe, séquences d’illustration), le pipeline design-vers-code de Lottie gagne sur l’animation CSS manuelle.
• Web Animations API pour le contrôle JavaScript.Si vous devez démarrer, mettre en pause, inverser ou modifier des animations depuis JavaScript au moment de l’exécution, l’API Web Animations (element.animate(keyframes, options)) est plus ergonomique que de lutter avec les classes CSS. Retourne un objet Animation avec des méthodes comme .pause(), .play(), .reverse(), et une Promise .finished. Support natif du navigateur, pas de bibliothèque nécessaire.
• requestAnimationFrame pour les boucles de jeu.Pour les animations pilotées par une logique JavaScript continue (boucles de jeu, simulations physiques, visualisations de données en temps réel), requestAnimationFrame avec des mises à jour de propriétés manuelles par image est la bonne approche. Les animations CSS sont déclaratives et prédéfinies ; rAF vous donne un contrôle par image sur ce qu’il faut mettre à jour. Utilisez Canvas ou WebGL quand vous avez aussi besoin de contrôle au niveau du pixel.

Autres questions fréquentes

Comment faire qu’une animation joue une seule fois ?

Réglez animation-iteration-count: 1 (qui est la valeur par défaut si non spécifié). Pour que l’élément reste dans l’état final de l’animation après qu’elle se termine (plutôt que de revenir au style d’origine), réglez aussi animation-fill-mode: forwards. Le raccourci combiné est animation: fadeIn 0.5s ease-out forwards;.

Puis-je mettre en pause et reprendre une animation ?

Oui, avec animation-play-state: paused (ou running). Basculez cette propriété via JavaScript (par ex. au clic d’un bouton) ou en CSS via :hover pour les motifs « pause au survol ». L’animation se fige à son point actuel et reprend de là quand elle est remise en running, sans perte de progrès. Cela fonctionne pareil dans les transitions mais seule la propriété animation-play-state existe pour le contrôle de pause à l’exécution.

Comment déclencher une animation au clic ou au défilement ?

Pour les déclencheurs au clic, basculez une classe CSS via JavaScript : element.classList.toggle('animate-in'). L’animation s’exécute quand la classe est ajoutée. Pour les déclencheurs de défilement, utilisez IntersectionObserver pour détecter quand l’élément entre dans la fenêtre d’affichage et ajoutez la classe alors. Pour les navigateurs modernes, les animations CSS pilotées par défilement vous permettent de lier la progression de l’animation directement à la position de défilement sans JavaScript via animation-timeline: scroll().

Pourquoi mon animation scintille-t-elle ou bégaie-t-elle ?

La plupart des problèmes de scintillement/bégaiement viennent de l’animation de propriétés déclenchant la mise en page (width, height, top/left) au lieu des équivalents basés sur transform. Passez de left: 0 à transform: translateX(0) et l’animation devrait s’adoucir. Autres causes : surdessins par de nombreuses couches semi-transparentes, thrashing de mise en page par JavaScript lisant et écrivant les styles dans la même image, ou ombres et filtres excessifs sur l’élément animé.

Devrais-je utiliser des animations sur des interfaces critiques pour l’accessibilité ?

Utilisez-les, mais respectez prefers-reduced-motion. Les directives WCAG 2.1 recommandent de fournir l’option de désactiver le mouvement non essentiel. Enveloppez les animations décoratives dans @media (prefers-reduced-motion: no-preference) pour que les utilisateurs qui définissent la préférence OS obtiennent une expérience statique. Les animations de retour essentielles (indicateurs de chargement, secousses d’erreur) peuvent être conservées ; les purement décoratives devraient être opt-in pour les utilisateurs sensibles.

Puis-je utiliser cubic-bezier pour des courbes d’atténuation personnalisées ?

Oui. La fonction de timing cubic-bezier(x1, y1, x2, y2) vous permet de définir n’importe quelle courbe d’atténuation avec deux points de contrôle. Chaque valeur x est entre 0 et 1 (représentant le temps), les valeurs y peuvent être négatives ou supérieures à 1 (permettant les effets de dépassement et de rebond). Utilisez notre outil Cubic Bezier ou le classique cubic-bezier.com de Lea Verou pour choisir une courbe visuellement. Alternatives de préréglage courants : ease, ease-in, ease-out, ease-in-out, et la variable CSS aliasée linéairement cubic-bezier(0.25, 0.1, 0.25, 1) (ease par défaut).