Générateur d'Animations CSS

Générateur d'Animations CSS — Construisez des @keyframes avec Aperçu en Direct

Un éditeur visuel pour CSS @keyframes qui s'exécute entièrement dans votre navigateur. Choisissez un préréglage pour charger une animation complète, puis ajustez durée, easing, itérations, direction et les stops individuels (translateX, translateY, scale, rotate, opacity, couleur de fond). L'aperçu se re-rend à chaque changement et la sortie CSS est régénérée comme du code canonique prêt à copier, avec un bloc @keyframes neuf et une ligne raccourci animation.

Que génère exactement cet outil ?

Deux blocs de CSS pur :

1. Un bloc `@keyframes <nom>` avec chaque stop que vous avez défini (0%, 100%, plus tout stop supplémentaire ajouté). Chaque stop n'émet que les propriétés qui diffèrent de la valeur par défaut — si vous ne changez jamais la couleur de fond, aucune ligne `background-color` n'apparaît. Si `translate(x, y)` est zéro sans scale ni rotate, aucune `transform` n'est écrite. Cela garde la sortie minimale et lisible.

2. Un raccourci d'animation : `animation: <nom> <durée>s <timing-function> <délai>s <iterations> <direction> <fill-mode>;` — exactement l'ordre attendu par les navigateurs, donc vous pouvez le coller sur n'importe quel sélecteur.

Appliquez-le à tout élément en ajoutant le raccourci au sélecteur de cet élément et en vous assurant que le bloc `@keyframes` est en portée (même stylesheet ou stylesheet parent).

Comment l'aperçu en direct reste-t-il synchronisé avec la sortie CSS ?

Chaque changement — un curseur, un select, un input dans la table de keyframes — déclenche trois choses en séquence :

1. L'objet state se met à jour (nom, durée, keyframes, etc.).
2. Le texte CSS est reconstruit et affiché dans le panneau de sortie avec coloration syntaxique.
3. Un élément `<style>` scopé avec un suffixe `__preview` sur le nom de l'animation est injecté (ou remplacé) dans le head de la page, puis la classe de la boîte est retirée et rajoutée à la prochaine frame d'animation pour forcer un redémarrage.

Le suffixe `__preview` empêche une collision de nom avec une copie du même CSS déjà sur la page, et l'astuce du reflow (`void box.offsetWidth`) est ce qui fait fonctionner 'Rejouer' même quand l'animation est terminée. Aucun JavaScript ne pilote le mouvement — le compositeur du navigateur gère chaque frame, c'est pourquoi l'aperçu est fluide même sur un appareil modeste.

Quels préréglages sont inclus et lequel choisir pour commencer ?

Onze préréglages couvrent les motifs les plus courants :

- **fade-in / zoom-in / zoom-out** — animations d'entrée et sortie via opacity et scale.
- **slide-in-left / slide-in-right** — translate depuis hors-écran à la position, ease-out pour une décélération naturelle.
- **bounce** — translate vertical avec trois pics, ease-in-out, infini.
- **pulse** — scale à 1.05 puis retour, infini, utile pour des boutons 'attention'.
- **shake** — oscillation horizontale courte pour les états d'erreur.
- **rotate-360** — une révolution complète, easing linéaire, infini — pour les spinners.
- **flip** — effet de retournement via rotateY simulé par un scale rapide sur X puis retour.
- **color-cycle** — anime background-color à travers des stops de teinte.

Si vous ne savez par où commencer, prenez le plus proche de votre intention puis ajustez durée et easing. La plupart des animations de production durent 200–400ms (interactions UI), 800–1500ms (entrées hero), ou sont infinies (loaders).

Que contrôle réellement la fonction de temporisation ?

La fonction de temporisation est la courbe d'easing — elle mappe le temps d'animation (0 à 1) à une valeur de progression, qui détermine comment la boîte bouge entre deux keyframes.

Les préréglages couvrent quatre familles :

- **linear** — vitesse constante. Idéal pour spinners, tout ce qui doit paraître mécanique.
- **ease / ease-in / ease-out / ease-in-out** — courbes cubic bézier intégrées. Idéal pour le mouvement UI ; `ease-out` est la plus commune car elle paraît naturelle (début rapide, arrêt doux).
- **cubic-bezier(0.34, 1.56, 0.64, 1)** — dépassement. La coordonnée y de P2 est supérieure à 1, donc l'animation dépasse la cible puis s'installe. Parfait pour des entrées ludiques.
- **steps(N, end)** — saute en N pas discrets. Idéal pour les animations sprite-sheet ou les effets de machine à écrire où vous ne voulez pas d'interpolation lisse.

La fonction de temporisation s'applique entre chaque paire de keyframes sauf si vous l'écrasez par stop en CSS raw (cet outil utilise une courbe pour toute l'animation, ce qui couvre 95% des usages réels).

Comment les pourcentages de keyframe sont-ils utilisés et quel est le minimum ?

Un bloc `@keyframes` a besoin d'au moins deux stops — généralement `0%` et `100%` — pour décrire un état initial et final. Vous pouvez ajouter plus de stops pour définir des poses intermédiaires ; le navigateur interpole entre stops consécutifs en utilisant la fonction de temporisation.

Par exemple, un bounce qui soulève la boîte à mi-chemin utilise :

```
0% { transform: translateY(0); }
50% { transform: translateY(-40px); }
100% { transform: translateY(0); }
```

La table dans cet outil garde les stops triés par pourcentage et refuse la suppression s'il n'en reste que deux (le minimum). Deux alias pratiques que CSS accepte aussi — `from` et `to` — correspondent à `0%` et `100%` respectivement, mais cet outil écrit toujours la forme numérique pour la cohérence.

Si vous voulez qu'une propriété 'saute' au lieu d'interpoler, placez deux stops adjacents à un pourcent près (ex. `49% { x: 0 } 50% { x: 100 }`).

Quelle est la différence entre iteration count, direction et fill mode ?

Ces trois propriétés contrôlent comment l'animation se comporte dans le temps :

- **iteration-count** — combien de fois jouer. `1` (par défaut) joue une fois et s'arrête dans l'état non animé ; `infinite` boucle pour toujours ; tout nombre positif (y compris des fractions comme `2.5`) joue ce nombre de fois.
- **direction** — `normal` joue 0%→100% à chaque fois ; `reverse` joue 100%→0% ; `alternate` inverse à chaque itération (0→100, puis 100→0, puis 0→100…) ; `alternate-reverse` est alternate en commençant à l'envers.
- **fill-mode** — que montrer quand l'animation ne joue pas. `none` (par défaut) revient à l'état non animé à la fin (et montre l'état non animé pendant le `delay`). `forwards` garde le dernier keyframe appliqué après la fin. `backwards` applique le premier keyframe pendant le délai. `both` fait les deux.

Un motif courant 'fade-in puis rester' utilise `iteration-count: 1`, `direction: normal`, et `fill-mode: forwards` pour que la boîte reste visible après le fondu d'entrée.

Comment utiliser le CSS généré dans mon projet ?

Trois étapes :

1. Cliquez **Copier** pour obtenir le bloc `@keyframes` et le raccourci `animation: …`.
2. Collez-les dans votre stylesheet. Le bloc `@keyframes` peut vivre n'importe où dans votre CSS — en haut, en bas, dans une balise `<style>`, dans un fichier `.css` lié depuis votre HTML. Gardez les deux ensemble pour la clarté.
3. Le raccourci est appliqué à `.element` par défaut — changez `.element` pour votre sélecteur (ex. `.modal`, `#hero-image`, `.btn-attention`). Si vous voulez sur hover, scopez le raccourci à `:hover`. Si vous voulez conditionnellement, ajoutez/retirez la classe avec JavaScript.

Si vous avez besoin de l'animation dans plusieurs composants avec différentes durées, définissez `@keyframes` une fois et écrivez plusieurs lignes `animation:` avec le même nom mais des durées différentes.

Pour la production, vous pouvez aussi utiliser la forme longue (`animation-name`, `animation-duration`, etc.) si vous devez écraser une seule propriété dans une media query — mais le raccourci est plus compact pour la déclaration initiale.

Cet outil est-il privé ? Envoie-t-il mon animation quelque part ?

Oui, totalement privé. Tout s'exécute dans votre navigateur :

- L'aperçu est un bloc `<style>` injecté dans la même page — aucun enregistrement canvas, aucun aller-retour serveur, aucune télémétrie.
- La sortie CSS est générée par des template strings en JavaScript ; rien n'est envoyé à un serveur quand vous changez un curseur ou choisissez un préréglage.
- Le bouton Copier utilise directement l'API du presse-papiers du navigateur.
- Aucune bibliothèque d'animation externe n'est chargée (pas de GSAP, pas d'anime.js, pas de Framer Motion) — la sortie est du CSS pur que les navigateurs supportent depuis IE10.

Vous pouvez vérifier en ouvrant DevTools → Réseau et en observant le panneau pendant que vous ajustez l'animation — aucune requête ne devrait se déclencher. Cela signifie aussi que l'outil fonctionne hors-ligne une fois la page chargée, et tout `nom` choisi pour votre animation reste dans votre navigateur.

Caractéristiques Clés

• 11 animations préréglées : fade-in, slide-in-left/right, bounce, pulse, shake, rotate-360, zoom-in/out, flip, color-cycle
• Table de keyframes éditable avec translateX, translateY, scale, rotate, opacity, couleur de fond
• Aperçu en direct re-rendu à chaque changement ; contrôles pause/rejouer
• 9 fonctions de temporisation dont cubic-bezier (dépassement) et steps()
• Direction (normal/reverse/alternate/alternate-reverse) et fill-mode (none/forwards/backwards/both)
• Itérations : 1, 2, 3, infinite, ou tout nombre positif
• Ajoute des keyframes intermédiaires au point médian, auto-tri par pourcentage
• Minimum deux stops obligatoires ; bouton supprimer désactivé au minimum
• Génère un bloc @keyframes canonique et un raccourci animation
• Sortie CSS avec syntaxe colorée en modes clair/sombre
• Copie au presse-papiers en un clic
• Aucune bibliothèque d'animation externe — CSS pur, natif au navigateur
• Fonctionne hors-ligne après le premier chargement
• Mise en page responsive adaptée au mobile
• 100% côté client — rien n'est envoyé à un serveur