Générateur d’animations CSS

Un générateur visuel d’animations CSS par images clés qui permet de créer, de prévisualiser et d’exporter du CSS avec @keyframes prêt pour la production, sans écrire une seule ligne de code.

Dernière mise à jour : 23 septembre 2026

Concevez des animations en temps réel grâce à une interface à trois panneaux : ajustez les paramètres sur la gauche, sculptez les images clés au milieu, regardez-les jouer sur la droite.

Ce qu'il fait :

• Éditeur de timeline : cliquez pour ajouter des arrêts d'images clés, faites glisser les points pour les repositionner à n'importe quel pourcentage

• Éditeur de propriétés : contrôle de l'opacité, des transformations (translation, rotation, mise à l'échelle, inclinaison), des filtres, des couleurs, de la taille et plus encore par image clé

• Aperçu en direct : joue votre animation sur une boîte, un cercle ou une forme de texte ; parcourez-la image par image

• Code output : génère du @keyframes CSS propre en mode complet ou keyframes-only, syntaxe longue ou courte

• 12 presets intégrés dans les catégories Entrée, Attention, Continu et Sortie comme point de départ

Les options d'assouplissement incluent les courbes standard, le ressort, le rebond et la synchronisation par étapes, chacune visualisée avec un diagramme de courbe en direct.

Qu'est-ce qu'un générateur d'animation CSS Keyframe ?

Un générateur d'animation d'image clé CSS est un outil basé sur un navigateur qui transforme une timeline visuelle en code @keyframes fonctionnel.

Au lieu de saisir manuellement les arrêts de pourcentage et les propriétés d'animation, vous faites glisser les curseurs, choisissez des courbes d'atténuation et regardez le mouvement se produire en direct.

L'ensemble du travail de l'outil est de supprimer les conjectures de syntaxe entre le mouvement désiré et l'envoi d'une règle de feuille de style terminée.

Il appartient à la même famille que d'autres outils de génération à usage unique, similaire dans l'esprit à un générateur d’indicateurs de chargement css construit spécifiquement pour les spinners plutôt que pour le mouvement général.

La plupart des générateurs d'images clés partagent une courte liste de tâches qu'ils doivent bien faire.

• Convertir une chronologie en arrêts d'images clés basés sur un pourcentage
• Exposer les propriétés animables communes, transformation, opacité, couleur
• Prévisualisez le mouvement en temps réel avant l'exportation
• Syntaxe CSS, SCSS ou JS prête à être copiée et collée

Animista, par exemple, expose exactement ce flux de travail. Choisissez une catégorie, poussez quelques curseurs, copiez le CSS.

Se familiariser avec CSS (EN) lui-même aide ici, puisqu'un générateur n'écrit jamais que du CSS standard sous le capot.

Il ne s'agit pas d'inventer une nouvelle syntaxe. C'est juste assembler des morceaux plus vite que la plupart des gens les tapent à la main.

Quels sont les formats de sortie et les options d'exportation fournis par les générateurs ?

La plupart des générateurs renvoient du CSS brut par défaut, prêt à être collé directement dans une feuille de style.

Plusieurs vont plus loin et offrent une sortie SCSS, ou un objet JavaScript en forme de props de style en ligne dans React ou Vue.

Chemins d'exportation communs :

• Copier dans le presse-papiers, l'option la plus rapide pour une animation unique
• Télécharger en tant que fichier .css autonome
• Poussez directement vers un CodePen pour le partage ou d'autres ajustements

L’option presse-papiers est celle que recherchent la plupart des gens. Le téléchargement d'un fichier n'est vraiment utile que lorsque vous générez plusieurs animations en une seule fois et que vous souhaitez les regrouper.

Rien de tout cela ne remplace la consultation des exemples terminés en premier. Une page de démos css animation (EN) vous montrera souvent l'effet exact que vous recherchez, en sautant complètement l'étape du générateur.

Le code exporté a toujours besoin d'un foyer. Vous allez généralement coller le bloc généré après vos autres règles, puis référencer le nom de l'animation à partir de la propriété abrégée sur tout élément qui doit se déplacer.

Une chose qui mérite d'être signalée dès le départ : les noms de classes générés sont souvent génériques, des choses comme "fadeInUp1" ou "spin2" Renommez-les avant qu'ils ne entrent en collision avec quelque chose déjà dans votre feuille de style.

Comment fonctionnent les générateurs d'animations CSS Keyframe ?

Un générateur convertit la timeline que vous créez en une règle @keyframes réelle, traduisant chaque arrêt en un pourcentage à l'intérieur du bloc.

Sous les curseurs et les sélecteurs de couleur, il suffit d'écrire un sélecteur d'image clé pour chaque arrêt, en utilisant la même syntaxe que celle que vous trouverez dans les images clés CSS (EN) écrites à la main.

Arrêts de pourcentage d'image clé

Chaque animation s'exécute de 0% à 100%, et un générateur vous permet de laisser tomber des arrêts supplémentaires n'importe où entre les deux.

Un rebond typique à trois arrêts pourrait ressembler à ceci :

Ajouter un arrêt à 50% au lieu de sauter directement de 0% à 100% est ce qui transforme un mouvement plat en quelque chose qui se sent vraiment rebondissant.

Paramètres de synchronisation

A côté des arrêts d’image clé, un générateur expose le côté numérique de la propriété de raccourci de l’animation.

• Durée : la durée d'un cycle, généralement définie en secondes
• Delay : combien de temps le navigateur attend avant de commencer
• Nombre d'itérations : combien de fois le cycle se répète, ou infini pour une boucle
• Direction : si elle joue en avant, en arrière, ou alterne chaque cycle

La durée par défaut de la plupart des générateurs est comprise entre une demi-seconde et deux secondes, car cette plage couvre la majeure partie des mouvements d'interface utilisateur réellement créés.

La couverture de la propriété est tout aussi importante que le moment.

Les générateurs sont les plus puissants avec transform et opacity, qui restent tous deux accélérés par GPU, et les plus faibles avec les propriétés déclenchant la mise en page telles que width ou top.

Les animations non composées et sujettes à des erreurs apparaissent toujours sur 40 % des pages mobiles et 44 % des pages de bureau (Annnimate, 2026), et la plupart de ces animations proviennent d’abord de l’animation des mauvaises propriétés.

Ajouter un indice de changement de volonté avant le début d'une animation lourde peut aider. Une utilisation excessive ne fait que consommer de la mémoire sans aucun bénéfice réel.

Certains outils vous permettent également de cibler directement des éléments SVG, le même territoire couvert dans les guides sur comment animer SVG avec CSS (EN), en utilisant stroke-dashoffset ou des données de chemin au lieu d'une transformation.

Chrome DevTools et l'Animation Inspector de Firefox vous permettent tous deux de parcourir ensuite l'animation exportée image par image, ce qui détecte les erreurs d'atténuation qu'un aperçu en direct seul peut manquer.

Quelles fonctions d'atténuation les générateurs d'animations CSS prennent-ils en charge ?

Chaque générateur est livré avec les mots-clés de timing standard : linéaire, facilité, facilité d'entrée, facilité de sortie et facilité d'entrée.

Le linéaire se sent mécanique et même. Ease-in-out se sent naturel, parce qu'il imite la façon dont les objets physiques accélèrent et décélèrent réellement.

Au-delà des presets, la plupart des outils exposent également :

• Un éditeur de courbe cubique-bezier personnalisé, faisant glisser deux points de contrôle sur un graphique
• Fonctions pas à pas, pour un mouvement image par image ou de style sprite
• Presets de type ressort nommés sur les outils plus orientés vers la conception

Faire glisser une courbe de Bézier à l'œil est compliqué. Le cubic-bezier.com de Lea Verou reste l'outil de référence pour visualiser une courbe en dehors d'un générateur.

La courbe d’assouplissement change plus qu’elle n’y paraît. Un ease-in prononcé sur un menu déroulant peut rendre une animation de 200 ms lente, tandis que la même courbe sur une animation de héros de 600 ms semble délibérée.

Cette erreur est l'une des raisons les plus courantes pour lesquelles une animation générée semble "déconnectée" même lorsque le code est techniquement correct.

Comment la compatibilité du navigateur affecte-t-elle les animations CSS générées ?

Les navigateurs modernes gèrent les animations @keyframes standard sans aucun préfixe de fournisseur, de sorte que la plupart du code généré fonctionne immédiatement.

L'animation CSS affiche un score de compatibilité de 97 sur 100 sur les navigateurs de bureau et mobiles actuels (LambdaTest, 2025), qui couvre la grande majorité du trafic réel.

Les préfixes comme -webkit- n'ont d'importance que pour une poignée d'anciennes versions de Safari et d'Android Browser, ou pour quelques nouvelles propriétés expérimentales qui travaillent encore vers une compatibilité complète entre les navigateurs. (EN)

Les équipes exécutant une étape de compilation laissent généralement Autoprefixer gérer cette étape automatiquement, en fonction de la liste de navigateurs qu'elles ont configurée.

Là où la compatibilité fait encore trébucher les gens :

• Très anciennes versions du navigateur Android nécessitant des propriétés d'animation -webkit-
• Safari à la traîne derrière Chrome et Firefox sur les nouvelles propriétés liées à l'animation
• Gestion réduite des mouvements, puisqu'un générateur n'enveloppera pas votre sortie dans une requête multimédia pour vous

Ce dernier point vaut la peine d'être examiné. Respecter les préférences de mouvement d'un utilisateur est une étape manuelle, pas quelque chose que le bouton d'exportation fait pour vous.

Quel générateur d'animation CSS Keyframe devriez-vous utiliser ?

Le bon choix dépend si vous souhaitez un constructeur visuel, un éditeur de chronologie brute ou une bibliothèque prête à l'emploi que vous n'aurez jamais à configurer.

Animista, construit par le développeur Ana Travas, tend vers des ajustements visuels rapides. Vous parcourez les catégories comme les entrées, les sorties et les chercheurs d'attention, puis ajustez les curseurs jusqu'à ce que quelque chose s'adapte.

Keyframes.app favorise les personnes qui veulent voir le pourcentage brut s'arrête pendant qu'ils travaillent, plus proche d'un outil de timeline qu'une galerie de préréglages.

Animate.css ignore entièrement l’éditeur. Vous ajoutez un nom de classe à un élément et obtenez l'un des dizaines d'effets prédéfinis, sans écriture d'image clé impliquée.

Aucune des trois charges pour l'utilisation, donc le facteur décisif est vraiment le flux de travail. Choisissez le générateur visuel si vous concevez à la volée, et la bibliothèque si vous savez déjà exactement quel effet vous voulez.

Générateurs d'images clés CSS vs codage manuel vs bibliothèques d'animation JavaScript : lequel gagne ?

Un générateur gagne en vitesse pour un mouvement simple et autonome. Le codage manuel gagne sur le contrôle, et une bibliothèque JavaScript gagne une fois que l'animation a besoin de réagir à quoi que ce soit.

Générateur construit CSS :

• Rapide pour les motifs courants tels que les fondus, les rebonds et les hovers
• S'exécute sur le thread du compositeur lorsqu'il anime la transformation ou l'opacité, donc il reste bon marché sur le thread principal
• Limité lorsque vous avez besoin de séquencer plusieurs éléments

Écrit à la main CSS :

• Contrôle total sur chaque propriété et arrêt
• Aucune dépendance sur les particularités d'exportation d'un outil tiers
• Plus lent à écrire à partir de zéro, en particulier pour les chronologies complexes à plusieurs arrêts

Bibliothèques d'animation JavaScript :

• Gérez le séquençage, les déclencheurs de défilement et les interruptions avec grâce
• Ajouter le poids d'un paquet qu'une approche CSS pure ne supporte pas
• Mieux adapté aux interfaces lourdes en JavaScript qui chargent déjà un framework

Les données d’utilisation montrent à quel point cela est inégal dans la pratique. 91,7% des pages mobiles expédient au moins une transition CSS, tandis que seulement 18,4% chargent une bibliothèque d’animation JavaScript (Annnimate, 2026).

La même analyse place GSAP, la bibliothèque d’animation la plus connue par sa réputation, sur environ 2,2% de tous les sites web. Webflow l'a rendu entièrement gratuit, plugins inclus, en avril 2025, et l'adoption n'a toujours pas beaucoup bougé.

Pour un simple état de survol ou un changement de propriété unique, une transition CSS simple est généralement plus rapide que de créer des images clés complètes.

Réservez l’approche JavaScript (EN) aux animations qui dépendent de la position de défilement, de l’enchaînement des interactions utilisateur ou d’un easing fondé sur la physique que le générateur ne peut pas produire.

Quand un générateur d'animation d'image clé CSS ne fonctionne-t-il pas ?

Un générateur d’images clés gère bien les mouvements à élément unique et basés sur le temps. Il a du mal au moment où une animation a besoin de savoir quelque chose sur la page qui l'entoure.

Lorsqu'un groupe électrogène tombe généralement à court :

• Mouvement lié au défilement, où la progression est liée à la distance parcourue par l'utilisateur plutôt qu'à une durée fixe
• Séquencer plusieurs éléments avec des dépendances, comme une carte qui attend que son frère termine en premier
• Path morphing, ou vraie physique du ressort qui oscille plusieurs fois avant de s'installer (un seul dépassement de Bézier cubique, comme l'option Spring de cet outil, est le maximum que la plupart des générateurs peuvent atteindre)
• Gestion automatique des préférences de mouvement

Le mouvement piloté par le défilement constitue l’écart le plus évident. CSS le prend désormais en charge de manière native via la chronologie d'animation, et Chrome 145 a ajouté des animations déclenchées par défilement (EN) en 2026 comme extension supplémentaire de ce travail (Chrome pour les développeurs).

Un générateur construit autour d'une timeline de durée fixe n'a pas de curseur pour « exécuter ceci pendant que l'utilisateur fait défiler » Cette syntaxe est en dehors de ce que tout générateur d'images clés actuel exporte.

Le séquençage complexe se heurte à un mur similaire. Une fois que l'animation d'un élément doit déclencher, mettre en pause ou attendre un autre, le modèle de ligne de temps unique d'un générateur ne peut pas exprimer la dépendance.

L'accessibilité est le mode d'échec le plus silencieux. Un générateur n'enveloppera jamais sa propre sortie dans une requête prefers-reduced-motion media, et cette étape reste entièrement manuelle.

Le sauter n'est pas une petite négligence. 36,2 % des adultes âgés de 40 à 69 ans signalent des problèmes spécifiques d’équilibre et de vertige, selon les données NHANES recueillies entre 2021 et 2023 (Laryngoscope, 2026), et le mouvement sans entrave touche exactement le groupe que les directives web accessibility (EN) sur le mouvement existent pour protéger.

Le morphing de chemin se trouve dans le même compartiment. Les générateurs gèrent la transformation et l'interpolation des propriétés, pas les données de chemin point par point dont un vrai morph a besoin, de sorte que le travail passe généralement par une bibliothèque d'animation SVG (EN) dédiée à la place.

Comment créer une animation CSS avec un générateur d'images clés ?

Le flux de travail est suffisamment court pour être exécuté en quelques minutes une fois que vous connaissez l'ordre.

1. Sélectionnez la ou les propriétés à animer, généralement la transformation, l’opacité ou la couleur
2. Définir les arrêts d’image clé de début et de fin à 0 % et 100 %
3. Ajoutez tous les arrêts intermédiaires nécessaires pour un effet de rebond, d'oscillation ou à plusieurs étages
4. Choisissez une durée et une fonction d'atténuation, puis prévisualisez le résultat en direct
5. Définissez le délai, le nombre d'itérations et la direction si une seule passe par défaut n'est pas ce dont vous avez besoin
6. Exportez le code, collez-le dans votre feuille de style, puis appliquez le nom de l'animation à l'élément cible

La troisième étape est là où la plupart des gens se retrouvent coincés. Sauter directement de 0% à 100% sans arrêt entre les deux produit un mouvement qui semble plat, quelle que soit la qualité de la courbe d'assouplissement.

La sixième étape fait monter les gens d’une manière différente. Le nom de l'animation exportée est souvent générique, et le coller sous les règles existantes sans vérifier un conflit de nom peut silencieusement remplacer quelque chose déjà sur la page.

Avant l'expédition, vérifiez trois choses :

• L'animation tient-elle toujours sur une connexion plus lente ou une fréquence d'images plus faible ?
• L'élément retourne-t-il à un état de repos raisonnable lorsque l'animation se termine
• Une requête de média à mouvement réduit a-t-elle besoin d'un enroulement autour de la règle entière ?

Cette dernière vérification provient rarement du générateur lui-même. Vous l'ajoutez après l'exportation, en enveloppant le raccourci de l'animation afin qu'elle ne soit lue que pour les utilisateurs qui n'ont pas demandé moins de mouvement :

@media (prefers-reduced-motion: no-preference) {
  .element { animation: fadeIn 1.5s ease both; }
}

Comment optimiser les animations CSS générées pour les performances ?

Le choix de la propriété décide de la plupart de l'histoire de la performance avant que la durée ou l'assouplissement n'entrent en jeu.

Chiffres clés à connaître :

• Les animations non composites se situent au 90e percentile avec 13 par page sur ordinateur et 11 sur mobile (HTTP Archive Web Almanac, 2025)
• La propriété animation apparaît déjà sur 77% des pages mobiles et 76,8% des pages de bureau (HTTP Archive Web Almanac, 2022)
• La durée médiane de transition sur le Web est de seulement 300 ms (HTTP Archive Web Almanac, 2020)

Le premier chiffre est celui à surveiller. Une poignée de lourdes pages contiennent une douzaine ou plus d'animations non composées, chacune forçant un recalcul de la mise en page sur chaque image.

L'audit Lighthouse de Chrome détecte cela directement, en signalant les propriétés animées spécifiques responsables sous sa vérification des animations non composées.

La durée compte également, quoique de façon moins dramatique. La médiane de 300 ms n'est pas une règle stricte, mais une dérive bien au-delà d'une seconde sur une animation décorative se lit généralement comme lente plutôt que fluide.

L'exécution de plusieurs animations sur la même page à la fois s'additionne d'une manière différente. Chacun d'eux maintient le compositeur actif, ce qui vide la batterie plus rapidement sur les appareils mobiles qu'un seul effet bien timé ne le ferait jamais.

Quelles erreurs courantes se produisent lors de l'utilisation du code d'image clé généré ?

La plupart des problèmes avec le code d'image clé généré apparaissent après l'exportation, pas pendant l'étape de conception dans l'outil.

La ligne de propriétés personnalisées est facile à manquer car elle échoue silencieusement plutôt que de générer une erreur.

Les propriétés personnalisées animées, telles que celles que permet la règle @property de Houdini, apparaissent toujours sur une infime fraction des pages réelles : environ 1 030 pages de bureau et 1 175 pages mobiles sur l'ensemble des données de l'archive HTTP (Web Almanac, 2021).

@property lui-même fonctionne désormais dans tous les principaux navigateurs, depuis que Firefox l'a ajouté dans la version 128 en juillet 2024. La faible utilisation est un signe que la technique n'a pas été testée à grande échelle, alors traitez-la comme une amélioration progressive, jamais comme le seul chemin vers un effet.

Pour la ligne de mouvement réduit, exécuter un passage rapide contre une liste de contrôle d'accessibilité web (EN) capture la plupart de ce que le bouton d'exportation d'un générateur ne peut pas.

Une erreur mineure à signaler : coller le code exporté sans vérifier l'ordre des propriétés du raccourci d'animation.

Mélanger la durée et le délai dans l'abréviation est une erreur de copier-coller classique, puisque les deux sont des valeurs de temps et le navigateur ne vous avertira pas quand ils sont échangés.

La lecture des propriétés individuelles de l'abréviation au lieu de l'abréviation pendant le débogage capte cela plus rapidement que de regarder la ligne combinée.

Questions fréquentes : Générateur d’animations CSS

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

Une transition se déplace entre deux états, un début et une fin, déclenchée par un changement comme le survol.

Une animation CSS s'exécute sur sa propre timeline via @keyframes, avec autant d'arrêts intermédiaires que nécessaire, indépendamment de tout événement déclencheur.

Est-ce qu'un générateur d'animation CSS Keyframe est gratuit ?

Oui, oui. La catégorie fonctionne presque entièrement sur des outils gratuits, financés par la publicité ou open-source, puisque la sortie est juste du CSS statique sans traitement par serveur.

Il existe des logiciels d'animation payants, mais pour les images clés en particulier, les outils de navigateur gratuits couvrent presque tous les cas d'utilisation courants.

Le code d'image clé généré peut-il être modifié manuellement après exportation ?

Oui, et il en a généralement besoin. Le code exporté est en CSS simple, donc l'ouvrir dans n'importe quel éditeur fonctionne de la même manière que la modification d'images clés écrites à la main.

Renommer l’animation, ajuster un arrêt ou ajuster le timing n’entraîne aucun verrouillage au générateur original.

Plusieurs animations d'images clés peuvent-elles s'exécuter sur le même élément en même temps ?

Oui, oui. Listez plusieurs noms dans la propriété animation-name, séparés par des virgules, avec les valeurs correspondantes dans animation-duration et les autres sous-propriétés.

Chaque règle d'image clé s'exécute indépendamment sur le même élément, c'est ainsi que des effets combinés tels qu'une rotation et un fondu sont créés.

Que devriez-vous réparer en premier avec un générateur d'animation CSS Keyframe ?

Un générateur d'animation d'images clés CSS gagne sa place en premier dans le choix des propriétés : la transformation et l'opacité maintiennent le mouvement sur le thread du compositeur, tandis que la durée, le réglage de la courbe et le nettoyage de l'exportation restent secondaires jusqu'à ce que ce choix soit verrouillé.

La correction de la propriété d'abord, puis le réglage du timing, puis le nettoyage de l'export, empêche la sortie d'un générateur de se casser une fois que le contenu réel remplace l'aperçu.

• Choix de la propriété : transformation ou opacité sur la largeur ou le haut
• Timing et allégement : accordé avec l'aperçu en direct, pas deviné
• Nettoyage de l'exportation : classes renommées, préfixes vérifiés, enveloppés dans des préférences de mouvement réduit

Verrouiller le choix de la propriété a d'abord un coût : une requête ultérieure pour animer la largeur ou la couleur en douceur ne s'exécutera pas sur le thread du compositeur, forçant un repli plus lent, déclenchant la mise en page.

Une fois qu'un effet a besoin d'un contrôle au niveau des pixels au-delà des propriétés CSS, passer des images clés aux animations canvas (EN) est l'étape suivante naturelle pour les graphiques interactifs.