Construire des animations CSS avec aperçu live

Que fait le constructeur d’animation CSS ?

Le builder crée des animations CSS @keyframes visuellement. Par keyframe, vous définissez l’offset (0–100 %) et les propriétés — translateX, translateY, scale, rotate, opacity, color, backgroundColor, filter. L’aperçu live joue le résultat immédiatement, un bouton Replay relance l’animation, le toggle Slow-Mo triple la durée pour un debug précis.

31 presets d’animation couvrent les patterns classiques : effets d’entrée (Fade In, Slide In, Zoom In, Flip In X), déclencheurs d’attention (Pulse, Heartbeat, Shake, Wiggle, Soft-Bounce, Tada, Rubber-Band) et animations de sortie (Fade Out, Slide Out, Zoom Out, Collapse). Chaque preset est composited-friendly — aucune animation width/height cachée dans le stack.

La sortie vient en trois formats : CSS pur avec bloc @keyframes et shorthand animation:, bloc Tailwind v4 @theme pour usage class="animate-name", ou snippet JavaScript Web Animations API pour contrôle programmatique. Tous les trois sont paste-ready, y compris le bloc @media (prefers-reduced-motion) automatiquement émis.

Pourquoi prefers-reduced-motion est-il obligatoire ?

Le critère de succès WCAG 2.2 2.3.3 « Animation from Interactions » exige que les animations déclenchées par interaction utilisateur soient désactivables par l’utilisateur. Les navigateurs l’implémentent via le media query CSS prefers-reduced-motion, qui suit les paramètres OS : macOS « Réduire le mouvement », Windows « Désactiver les effets d’animation », iOS « Réduire le mouvement » dans les options d’accessibilité.

Ignorer cela exclut deux grands groupes : les personnes avec troubles vestibulaires (vertiges, nausées face aux grands mouvements) et les personnes avec troubles de l’attention (les contenus animés détournent continuellement l’attention). Le générateur ne rend pas le fallback optionnel — chaque sortie contient automatiquement :

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

Quatre stratégies sont disponibles : none désactive complètement l’animation, opacity-only réduit à de simples transitions de fondu sans mouvement, instant laisse l’animation tourner avec 0,01 ms (état final conservé, sans saut), ou une pile de keyframes personnalisée pour les cas complexes.

Quelles propriétés freinent le navigateur ?

Le rendu navigateur se déroule en trois phases par frame : Layout (calcul des positions et tailles), Paint (dessin des pixels), Compositing (empilement des couches). web.dev classifie les propriétés selon la phase qu’elles déclenchent :

• Composited only — transform, opacity, filter, backdrop-filter. Le navigateur peut déléguer ces animations à des couches compositor propres ; le main-thread reste libre, 60 fps même sur mobile sont réalistes.
• Paint-trigger — color, background-color, box-shadow. Le navigateur doit redessiner à chaque frame. Sans impact desktop, perceptible sur mobile bas de gamme.
• Layout-trigger — width, height, top, left, margin, padding, font-size, border-width. Le navigateur doit recalculer tout le layout par frame, souvent en cascade à travers les éléments frères. Saccades garanties sur mobile.

Le générateur scanne chaque keyframe et affiche un avertissement à bordure orange dès qu’une propriété layout ou paint est active. Les suggestions sont concrètes : width → transform: scaleX(), top → transform: translateY(), margin → transform: translate(). La conversion ne coûte généralement qu’une propriété keyframe — le résultat paraît identique.

Comment fonctionnent les courbes d’easing ?

Une fonction d’easing décrit l’accélération sur la durée d’animation. linear est constant — paraît mécanique et est généralement le mauvais choix. ease-out démarre vite, finit doucement — le choix le plus naturel pour les entrées UI. ease-in-out démarre et finit lentement — adapté aux transitions hover.

La plupart des courbes standard (CSS ease, ease-in, ease-out, ease-in-out) sont rondes et douces. Pour les designs refined-minimalism, la famille quint est plus nette et précise — cubic-bezier(0.16, 1, 0.3, 1) pour quint-out est le standard du design system kittokit lui-même. La famille back a un léger dépassement à la fin (cubic-bezier(0.175, 0.885, 0.32, 1.275) pour back-out) et est l’alternative propre aux animations bounce caoutchouteuses.

31 courbes preset sont disponibles, regroupées par famille : Linear, Standard, Quint, Quart, Cubic, Quad, Expo, Circ, Back, Sine, Steps. Qui a besoin de la courbe exacte bascule sur l’éditeur Cubic-Bezier et tire lui-même les quatre valeurs de handles (x1, y1, x2, y2).

Quand la Web Animations API vaut-elle la peine ?

CSS @keyframes est déclaratif — le navigateur gère le déroulé, JavaScript n’a qu’un contrôle indirect via animation-play-state ou class toggles. Dès que vous avez besoin de pause(), seek de currentTime, changements de playbackRate ou reverse() programmatique, la Web Animations API (element.animate()) est le choix propre.

Trois cas d’usage typiques :

• Scrollytelling. La progression d’animation doit être couplée à la position de scroll. Avec WAAPI, vous posez animation.currentTime = scrollProgress * animation.effect.getTiming().duration. Une animation CSS pure ne peut pas le faire.
• Flows narratifs séquencés. Plusieurs animations doivent tourner l’une après l’autre, avec callback après chaque étape. WAAPI donne à chaque retour d’appel animate() une interface Promise via animation.finished.
• Contrôle interactif. Boutons Pause/Play, toggle « inverser l’animation », slider « sauter l’animation à 50 % ». Avec CSS-only, vous devez basculer des classes et attendre animationend ; WAAPI a des méthodes directes.

Le générateur émet le snippet WAAPI avec un guard prefers-reduced-motion : si l’utilisateur a activé la réduction de mouvement, l’animation tourne avec 1 ms au lieu de la durée complète et ne conserve que l’état final.

Comment fonctionnent les animations scroll-driven ?

Depuis Chrome 115 (stable) et Edge 115, animation-timeline: scroll() fonctionne — l’animation ne tourne pas selon le temps, mais selon la position de scroll de l’ancêtre scrollable le plus proche. Firefox y travaille (feature flag), Safari n’en est pas encore là. Cela rend possibles les patterns scrollytelling classiques (parallax, barre de progression, pin-scrub) sans JavaScript.

Le générateur a un toggle opt-in pour cela. Si actif, la sortie est enveloppée dans un bloc @supports (animation-timeline: scroll()) :

@supports (animation-timeline: scroll()) {
  .animated {
    animation-name: myAnim;
    animation-timeline: scroll();
    animation-duration: auto;
  }
}

Les navigateurs sans support retombent silencieusement sur l’animation basée temps. Pour production hors Chrome-only, le polyfill Scroll-Driven Animations est recommandé — il fournit les API navigateur manquantes en ~12 ko de JavaScript.

Caveat : le générateur marque clairement la fonctionnalité comme « Limited Availability ». Qui active le toggle doit être conscient que les utilisateurs Safari et Firefox dépendent actuellement de l’animation fallback basée temps.

Quels patterns d’animation utiliser où ?

Animations d’entrée (Fade In, Slide In, Zoom In) sont adaptées au contenu qui apparaît après un trigger utilisateur — modal sheets, toast notifications, items d’accordéon en expansion. Durée 200–400 ms avec quint-out ou cubic-out est le choix discret. Des durées plus longues (>500 ms) paraissent artificiellement ralenties.

Déclencheurs d’attention (Pulse, Shake, Wiggle, Soft-Bounce) marquent les éléments importants — un message d’erreur de validation sur un champ de formulaire, un nouveau badge de notification dans le header, une indication « champ obligatoire ». Itération infinite à utiliser avec parcimonie — un bouton qui pulse en permanence devient vite intrusif. Préférez 2–3 itérations à l’action utilisateur, puis stop.

Animations de sortie (Fade Out, Slide Out, Zoom Out) sont la moitié souvent oubliée. Qui fait entrer un modal et simplement display: none à la fermeture saute visuellement durement. 150–250 ms cubic-in en sortie paraissent symétriques à l’entrée.

Transitions hover ne sont pas un cas d’usage du constructeur d’animation — transition: transform 200ms var(--ease-out) suffit. Les animations sont state-driven ; les transitions sont property-driven. Garder la séparation propre.

Comment utiliser les animations CSS dans Tailwind v4 ?

Tailwind v4 remplace la config JS de l’ère v3 par un bloc @theme CSS-First. Les animations sont enregistrées via custom properties --animate-{name} ; Tailwind génère automatiquement la utility animate-{name} :

@theme {
  --animate-fadeInUp: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal both;

  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(24px);
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
    }
  }
}

Cela devient <div class="animate-fadeInUp">…</div> disponible comme utility réutilisable. Le générateur émet ce bloc paste-ready, y compris le fallback @media (prefers-reduced-motion), scopé sur la utility générée.

La sortie Tailwind est la variante la plus compacte pour les design systems — l’animation est définie une fois et peut être réutilisée sur autant d’éléments que voulu. Le CSS pur est le bon choix pour des composants isolés ou des animations one-off sans design system.

Questions fréquentes

Que fait un constructeur d’animation CSS ?

Le constructeur crée des animations CSS @keyframes visuellement. Vous posez des stops sur une timeline, choisissez les propriétés par stop (transform, opacity, color), pickez une courbe d’easing et voyez le résultat en direct. La sortie est paste-ready en trois formats — CSS pur, Tailwind v4 ou Web Animations API.

Comment fonctionne prefers-reduced-motion ?

Le media query CSS détecte quand un utilisateur a activé la réduction de mouvement dans les paramètres OS. Le générateur émet automatiquement un bloc @media (prefers-reduced-motion: reduce) avec fallback configurable — animation off, opacité seulement, instantané (0,01 ms) ou keyframes personnalisés. Le critère de succès WCAG 2.2 2.3.3 l’exige pour les animations UI.

Quelles propriétés CSS sont composées et préservent les performances ?

transform (translate, scale, rotate), opacity, filter et backdrop-filter sont animés par le navigateur sur des couches compositor propres — sans reflow layout, sans repaint. Les animations sur width, height, top, left, margin forcent le navigateur à recalculer le layout à chaque frame et saccadent sur mobile. Le générateur avertit en direct quand une telle propriété est animée et propose l’alternative transform.

Quelle est la différence entre animations CSS et Web Animations API ?

CSS @keyframes est déclaratif — le navigateur gère le déroulé, vous n’avez pas de contrôle direct. La Web Animations API (element.animate()) vous donne un objet Animation avec pause(), play(), reverse(), currentTime et playbackRate. Pour les interactions scroll-driven, les séquences pilotées par JavaScript et le seek programmatique, WAAPI est le choix propre.

Comment utiliser les animations CSS dans Tailwind v4 ?

Tailwind v4 autorise depuis la CSS-First-Config un bloc @theme qui prend des custom properties --animate-{name} plus les @keyframes correspondants directement. Tailwind génère automatiquement la utility animate-{name}. Le générateur émet ce bloc paste-ready.

Que sont les courbes d’easing Cubic-Bezier ?

Une courbe Cubic-Bezier décrit l’accélération d’une animation via quatre points de contrôle. cubic-bezier(0.16, 1, 0.3, 1) est quint-out — démarrage rapide, sortie douce. Le design Refined-Minimalism favorise Quint-out pour les entrées UI et Back-out (léger dépassement) comme alternative à bounce. Le builder a un rail de 31 presets plus un éditeur de handles draggables.

Les animations scroll-driven sont-elles déjà fiables ?

animation-timeline: scroll() est stable depuis Chrome 115 et en cours dans Firefox ; Safari n’en est pas encore là. Le générateur émet la variante scroll-driven optionnellement dans un bloc @supports (animation-timeline: scroll()) — les navigateurs sans support retombent silencieusement sur l’animation basée temps. Pour production hors Chrome-only, le polyfill scroll-driven-animations est recommandé.

Que signifient fill-mode: forwards et backwards ?

fill-mode définit quelles valeurs s’appliquent avant et après l’animation. forwards conserve la frame finale — après expiration, l’élément reste dans l’état cible. backwards applique la frame de départ déjà pendant un animation-delay. both combine les deux. none (default) est généralement le mauvais choix : l’élément revient à son style original après l’animation.

Combien de keyframes sont utiles ?

Deux suffisent pour les patterns classiques Fade, Slide ou Zoom — début et fin. Trois à cinq permettent Pulse, Shake ou Wiggle avec rythme clair. Plus de dix keyframes devient illisible et se rapproche d’un comportement spring-physics — pour cela, la Web Animations API avec boucle JavaScript est le meilleur choix.

L’outil enregistre-t-il mes animations ?

Non. Toutes les saisies restent dans l’onglet du navigateur, rien n’est stocké ni téléversé. Au rechargement, l’éditeur est vide. Pour conserver une animation, copiez la sortie CSS dans votre propre stylesheet ou dans tokens.css.

Quels outils CSS sont liés ?

D’autres outils pour le CSS-authoring et la maintenance de design tokens :

• Générateur de dégradé CSS — construire des dégradés en OKLCH/Tailwind v4.
• Générateur Box-Shadow — empiler visuellement des ombres multicouches.
• Playground Flexbox — apprendre interactivement le layout flex.
• Formateur CSS — formater proprement du CSS brut ou minifié.