Comment utiliser : Générateur d’animation CSS
- Choisissez un préréglage (survolez les vignettes pour les prévisualiser) ou partez d’une keyframe vide.
- Réglez la durée, le délai, le nombre de répétitions, l’accélération et le déclencheur (chargement, survol, clic, défilement).
- Modifiez les keyframes sur la timeline : cliquez pour en ajouter une, glissez-la pour la déplacer, puis ajustez ses propriétés avec les curseurs.
- Parcourez l’animation, ralentissez-la ou activez le papier pelure pour affiner, puis copiez le CSS, Tailwind ou HTML.
Ce que vous pouvez créer
- Timeline de keyframes — ajoutez autant de keyframes que nécessaire, placez-les à de nouveaux pourcentages et définissez une accélération propre à chacune.
- Propriétés — translation X/Y, rotation, rotation 3D X/Y, mise à l’échelle, inclinaison, opacité, flou, lueur (box-shadow), couleur de fond et rayon de bordure. Les valeurs manquantes sont interpolées, donc les transformations ne sautent jamais.
- Déclencheurs — au chargement, au survol, au clic, à l’entrée dans la zone visible ou une animation pilotée par le défilement, en CSS uniquement.
- Décalage (stagger) — animez une liste élément après élément avec une seule propriété personnalisée CSS.
- Inspection — mettez en pause, parcourez image par image, ralentissez à ¼ de vitesse et activez le papier pelure pour voir toutes les keyframes en même temps.
- Export — notation abrégée ou détaillée en CSS, HTML, JavaScript, Tailwind v3 et v4, un mixin SCSS, un fichier de démonstration autonome ou un lien de partage.
La notation abrégée de animation
| Partie | Exemple | Signification |
|---|---|---|
| nom | fade-in-up | La règle @keyframes à exécuter |
| durée | 0.6s | Durée d’un cycle |
| fonction de temporisation | cubic-bezier(.33,1,.68,1) | Courbe de vitesse entre les keyframes |
| délai | 0.2s | Attente avant le départ ; les valeurs négatives démarrent en cours de route |
| nombre d’itérations | infinite | Nombre de cycles |
| direction | alternate | Lecture en sens inverse un cycle sur deux |
| mode de remplissage | both | Conserve la première image avant la lecture et la dernière après |
Accessibilité
Certaines personnes ressentent des vertiges ou des nausées face au mouvement. Lorsque Respect prefers-reduced-motion est activé, le CSS désactive l’animation pour les visiteurs ayant choisi « réduire les animations » dans leur système d’exploitation. Évitez de faire clignoter plus de trois fois par seconde et gardez les animations en boucle discrètes, ou proposez un moyen de les mettre en pause.
Conseils de performance
Animez transform et opacity plutôt que top, left, width ou margin, qui forcent un recalcul de la mise en page à chaque image. Ajoutez will-change uniquement aux éléments sur le point d’être animés. Façonnez votre accélération avec le générateur cubic-bezier, ajoutez un spinner grâce au générateur de loader CSS, et associez vos animations à des ombres portées ou des dégradés.
Aussi recherché comme : générateur animation css, animation css, keyframes css, créer animation css, animate css, animation css en ligne, générateur de code animation, effets css.
Outils complémentaires : Générateur d’animation CSS
- Générateur Keyframes CSS — Un éditeur visuel pour @keyframes.
- Générateur d'animations CSS au survol — Concevez des animations au survol pour boutons, cartes, liens et icônes.
- Calculateur de colliers de serrage — Saisissez une taille minimale et maximale ainsi que la plage de la fenêtre d'affichage — obtenez une valeur adaptée au zoom clamp() , accompagnée d’explications mathématiques, d’un aperçu en temps réel et d’une échelle complète de la typographie fluide ou de l’espacement.
- Convertisseur PX en REM — Convertissez entre pixels, rem et em avec votre propre taille de police racine, ou collez une feuille de style entière pour convertir toutes les valeurs px d’un coup.
Questions fréquentes
Le CSS généré est-il libre d’utilisation ?
Oui. Chaque préréglage a été écrit pour cet outil et le résultat est du CSS pur, sans bibliothèque, licence ni attribution requise.
Puis-je modifier une animation que j’ai déjà ?
Oui. Ouvrez Importer des @keyframes existants, collez votre CSS et il sera transformé en keyframes modifiables. L’opacité, les transformations (translate, rotate, rotateX/Y, scale, skew), le flou, la couleur de fond, le rayon de bordure et les ombres de lueur sont pris en charge.
Comment lancer l’animation lorsque l’élément entre dans la zone visible ?
Choisissez le déclencheur Lorsqu’il entre dans la zone visible pour un petit script IntersectionObserver qui fonctionne partout, ou Piloté par le défilement (CSS uniquement) pour
animation-timeline: view(), sans JavaScript, dans les navigateurs compatibles.Est-ce compatible avec Tailwind CSS ?
Oui. Les onglets Tailwind fournissent un bloc
tailwind.config.js pour la v3 et un bloc @theme pour la v4, afin d’utiliser l’animation sous forme de classe animate-*.Quelles propriétés privilégier pour une animation fluide ?
transform et opacity sont traités par le compositeur GPU et restent fluides même sur les téléphones modestes. Le flou, les ombres, les couleurs et le rayon de bordure coûtent davantage : utilisez-les avec parcimonie sur les grands éléments.Puis-je installer Générateur d’animation CSS en tant qu’application web et l’utiliser hors ligne ?
Oui. Générateur d’animation CSS est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.