- Éditeur Cubic Bezier CSS : courbes d'animation

Qu'est-ce qu'une courbe cubic-bezier ?

Une courbe cubic-bezier est une fonction mathématique paramétrique utilisée en CSS pour décrire la vitesse d'une animation ou d'une transition dans le temps. Définie par la spécification CSS Easing Functions Module Level 1 du W3C, elle prend le contrôle du timing (le « quand ») d'une interpolation entre deux états visuels, indépendamment de la durée totale (le « combien de temps »).

Concrètement, lorsque vous écrivez transition: transform 1s ease-in-out, le mot-clé ease-in-out est en réalité un alias de cubic-bezier(0.42, 0, 0.58, 1). Maîtriser cette fonction permet donc d'aller au-delà des cinq easings nommés et de créer des mouvements sur-mesure (rebonds, anticipations, départs brutaux, fins fluides), ce qui transforme radicalement la perception qualitative d'une interface utilisateur.

Origine mathématique : les courbes de Pierre Bézier

Inventées dans les années 1960 par l'ingénieur français Pierre Bézier chez Renault pour modéliser la carrosserie des voitures en CAO, ces courbes sont aujourd'hui omniprésentes : typographie vectorielle (TrueType, OpenType), illustrations Adobe Illustrator, animations Figma et After Effects, ou encore tracé des polygones SVG. Le CSS en exploite une variante très précise : la courbe cubique normalisée dans un carré unitaire [0,1]×[0,1].

Pourquoi un outil visuel est-il indispensable ?

Saisir directement cubic-bezier(0.68, -0.55, 0.27, 1.55) dans un fichier CSS sans le visualiser revient à dessiner les yeux fermés. L'éditeur visuel ci-dessus vous permet de :

• Voir immédiatement la trajectoire qu'aura un élément animé sur la durée totale.
• Comparer votre courbe personnalisée avec un preset CSS standard (ease, ease-in…).
• Expérimenter des valeurs Y hors [0,1] pour créer des effets d'overshoot ou d'anticipation impossibles à obtenir avec les easings nommés.
• Copier-coller le code prêt à l'emploi en CSS pur, transition complète, animation keyframes, classes Tailwind ou variable SCSS.

Syntaxe CSS et anatomie de la fonction

La fonction CSS cubic-bezier() accepte exactement quatre nombres séparés par des virgules. Ces quatre valeurs définissent les coordonnées (x, y) des deux points de contrôle internes de la courbe.

/* Signature officielle */
cubic-bezier(x1, y1, x2, y2)

/* Contraintes obligatoires */
x1 ∈ [0, 1]   /* temps du point 1 — toujours dans [0,1] */
x2 ∈ [0, 1]   /* temps du point 2 — toujours dans [0,1] */

/* Contraintes recommandées */
y1, y2 ∈ ℝ    /* la progression peut dépasser [0,1]
                 → overshoot / anticipation */

L'axe horizontal (X) représente le temps normalisé (de 0 = début à 1 = fin). L'axe vertical (Y) représente la progression de la valeur animée (de 0 = état initial à 1 = état final). Si Y sort de l'intervalle [0,1], l'élément animé dépasse temporairement sa valeur cible avant d'y revenir : c'est l'effet « rebond » bien connu de Material Design ou iOS.

Exemples concrets de combinaisons (x1, y1, x2, y2)

/* Démarrage très brusque, fin très douce */
.btn:hover { transition: transform 600ms cubic-bezier(0.05, 0.95, 0.1, 1); }

/* Anticipation — recule avant d'avancer */
.modal-enter { animation: slide 700ms cubic-bezier(0.68, -0.6, 0.32, 1.6); }

/* Bounce élastique fin */
.toast { transition: opacity 400ms cubic-bezier(0.25, 1.5, 0.5, 1); }

/* Step-like — accélération brutale au milieu */
.toggle { transition: background 250ms cubic-bezier(0.85, 0, 0.15, 1); }

Erreurs courantes à éviter

• ❌ cubic-bezier(1.2, 0, 0.4, 1) — X1 hors [0,1] → l'animation se contracte ou échoue selon le moteur.
• ❌ Confondre l'ordre : c'est (x1, y1, x2, y2) et non (x1, x2, y1, y2).
• ❌ Utiliser plus de 4 paramètres ou des valeurs non numériques.
• ✅ Toujours tester la courbe visuellement avant de la coller en production.

Les 5 easings CSS standard décortiqués

La spécification CSS définit cinq mots-clés d'easing qui correspondent en réalité à des courbes cubic-bezier précises. Les connaître par cœur permet de gagner du temps et de comprendre instinctivement ce qui se passe.

Au-delà des 5 standards : les courbes signature

Les design systems populaires définissent leurs propres signatures cubic-bezier pour offrir un toucher de marque cohérent :

/* Material Design 3 (Google) — emphasized */
--md-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);

/* Material Design — standard */
--md-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

/* iOS / Apple — easeInOutQuad reproduction */
--apple-easing: cubic-bezier(0.45, 0, 0.55, 1);

/* Penner — easeOutBack (overshoot léger) */
--penner-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

/* Penner — easeOutElastic approximation */
--penner-out-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55);

Cas d'usage : transition, animation et keyframes

La fonction cubic-bezier s'utilise dans deux contextes CSS principaux : la propriété transition-timing-function et la propriété animation-timing-function. Elle accepte aussi des usages plus avancés au sein des @keyframes.

Usage 1 — Avec transition

La transition CSS interpole une seule fois entre deux valeurs lors d'un changement d'état (hover, focus, classe ajoutée par JS). C'est l'usage le plus simple.

.card {
    transform: translateY(0);
    transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card:hover {
    transform: translateY(-8px);
}
/* → la carte « pop » légèrement vers le haut avec overshoot */

Usage 2 — Avec animation et @keyframes

L'animation CSS exécute une séquence de keyframes (potentiellement répétée). La timing-function s'applique entre chaque paire de keyframes, ou globalement si non précisée à chaque step.

@keyframes slideIn {
    0%   { transform: translateX(-100%); opacity: 0; }
    100% { transform: translateX(0);     opacity: 1; }
}

.notification {
    animation: slideIn 500ms cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
}
/* → glisse de la gauche avec un léger dépassement final */

Usage 3 — Easing par step de keyframe

Il est possible de définir une cubic-bezier différente entre chaque keyframe. C'est extrêmement puissant pour des animations complexes (chargement, séquence narrative).

@keyframes pulse-attention {
    0%   { transform: scale(1);    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
    50%  { transform: scale(1.15); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
    100% { transform: scale(1); }
}

.attention { animation: pulse-attention 1.2s infinite; }
/* → grossit doucement, revient brusquement,
     puis pause avant la boucle suivante */

Usage 4 — Combinaison avec custom properties

Centraliser les easings dans des variables CSS permet de garantir une cohérence visuelle sur tout un design system.

:root {
    --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
    --ease-back-out:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-anticipation: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    --duration-fast:     180ms;
    --duration-normal:   320ms;
    --duration-slow:     520ms;
}

.btn         { transition: all var(--duration-fast)   var(--ease-out-quart); }
.modal-enter { animation: fadeUp var(--duration-slow) var(--ease-back-out); }

Intégration Tailwind, SCSS et Angular Animations

Tailwind CSS — extension de la config

Tailwind expose les easings via la clé transitionTimingFunction de tailwind.config.js. Une fois étendue, vous gagnez des classes utilitaires ease-* personnalisées.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      transitionTimingFunction: {
        'back-out':      'cubic-bezier(0.34, 1.56, 0.64, 1)',
        'anticipation':  'cubic-bezier(0.68, -0.55, 0.27, 1.55)',
        'md-emphasized': 'cubic-bezier(0.2, 0, 0, 1)',
      }
    }
  }
}

/* Usage dans le HTML */
<button class="transition-transform duration-300 ease-back-out hover:scale-105">
  Hover me
</button>

SCSS / Sass — mixin réutilisable

Définir des variables Sass et un mixin de timing-function permet de fluidifier l'écriture d'animations dans toute la codebase.

// _easings.scss
$ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
$ease-back-out:  cubic-bezier(0.34, 1.56, 0.64, 1);

@mixin smooth-transform($duration: 300ms, $easing: $ease-out-quart) {
    transition: transform $duration $easing,
                opacity    $duration $easing;
}

.card {
    @include smooth-transform(400ms, $ease-back-out);
    &:hover { transform: translateY(-6px); }
}

Angular Animations — équivalent dans @angular/animations

Dans Angular, la fonction animate() du module @angular/animations accepte la même chaîne CSS que transition. Vous pouvez donc copier directement le résultat de cet éditeur.

import { trigger, transition, style, animate } from '@angular/animations';

export const slideUpAnimation = trigger('slideUp', [
  transition(':enter', [
    style({ transform: 'translateY(20px)', opacity: 0 }),
    animate(
      '420ms cubic-bezier(0.34, 1.56, 0.64, 1)',
      style({ transform: 'translateY(0)', opacity: 1 })
    ),
  ]),
]);

Performance, accessibilité et bonnes pratiques

Performances — animer uniquement transform et opacity

Quelle que soit la cubic-bezier choisie, la fluidité d'une animation dépend avant tout des propriétés CSS animées. Le moteur de rendu n'optimise nativement que deux propriétés sur GPU :

• transform — déplace, tourne, change l'échelle sans déclencher de reflow.
• opacity — modifie la transparence sans repaint coûteux.

Animer width, height, top, left ou margin avec une courbe cubic-bezier custom n'apporte rien si chaque frame déclenche un reflow complet. Mesurez avec l'onglet Performance de Chrome DevTools (mode Slow 4G + CPU throttling 6×) pour vérifier que vous restez sous les 16,67 ms par frame (60 fps).

/* ❌ À éviter — provoque des reflows */
.card { transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1); }

/* ✅ Préféré — uniquement GPU */
.card { transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); }

Accessibilité — prefers-reduced-motion

Certains utilisateurs souffrent de troubles vestibulaires aggravés par les animations rapides (vertiges, nausées). La media query prefers-reduced-motion permet de désactiver ou ralentir vos animations pour ces personnes.

.card {
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
    .card {
        transition-duration: 0.01ms;
        transition-timing-function: linear;
    }
}

Cohérence — limiter à 3-4 easings dans un projet

Un projet utilisant 12 cubic-bezier différents donne une impression d'incohérence visuelle. Les meilleures équipes UX limitent à 3 à 4 easings signature maximum :

• Standard — pour la majorité des transitions (boutons, hovers).
• Emphasized — pour les éléments d'attention (modals, toasts).
• Decelerated — pour les entrées d'écran (slide-in).
• Accelerated — pour les sorties d'écran (slide-out).

FAQ — Questions fréquentes

Quelle différence entre cubic-bezier et steps() en CSS ?

La fonction cubic-bezier() produit une interpolation continue entre deux valeurs (l'élément traverse tous les états intermédiaires). La fonction steps(n, jumpterm) produit au contraire une interpolation discrète en n paliers, parfaite pour animer un sprite ou un effet typewriter, mais inadaptée pour des mouvements fluides.

Peut-on animer une cubic-bezier en JavaScript ?

Oui, via la Web Animations API native du navigateur. Elle accepte la même chaîne que CSS : element.animate(keyframes, { duration: 400, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' }). C'est très utile lorsque les paramètres dépendent dynamiquement de l'utilisateur (drag end, gesture velocity).

Que faire si Y1 ou Y2 est trop loin de [0,1] ?

Aucun problème technique : tous les navigateurs modernes acceptent des Y négatifs ou supérieurs à 1, ce qui crée les effets d'anticipation et d'overshoot. En revanche, plus la valeur est extrême (par exemple Y > 2), plus le mouvement paraît caricatural. Garder Y dans [-0.5, 1.5] reste le sweet-spot pour la majorité des UI.

Comment créer un effet « bounce » sans cubic-bezier ?

Une vraie animation bounce (plusieurs rebonds décroissants) ne peut pas être obtenue avec une seule cubic-bezier (qui n'a que 2 points de contrôle). Il faut utiliser @keyframes avec plusieurs étapes ou la fonction expérimentale linear() introduite dans les navigateurs récents, qui accepte un nombre arbitraire de points.

Y a-t-il un coût CPU à utiliser une cubic-bezier complexe ?

Le calcul de la cubic-bezier elle-même est négligeable (quelques nanosecondes par frame). Le vrai coût provient de la propriété animée. Tant que vous animez transform ou opacity, la cubic-bezier choisie n'a aucun impact mesurable sur les performances, même sur smartphone d'entrée de gamme.

Quelle est la différence entre transition-timing-function et animation-timing-function ?

Sémantiquement, aucune : les deux acceptent les mêmes valeurs (mots-clés CSS, cubic-bezier(), steps(), linear()). Techniquement, transition-timing-function s'applique aux transitions déclenchées par un changement d'état, tandis que animation-timing-function s'applique aux @keyframes.

Peut-on utiliser cubic-bezier pour des animations SVG ?

Oui, exactement de la même façon. Les éléments SVG sont stylables en CSS et acceptent transition, animation et @keyframes avec une cubic-bezier custom. Pour le tracé SMIL natif, l'attribut calcMode="spline" + keySplines permet aussi de spécifier des courbes Bézier, avec une syntaxe légèrement différente.

Conclusion

La fonction cubic-bezier() est l'un des outils les plus puissants — et les plus mal utilisés — du CSS moderne. Bien maîtrisée, elle transforme une interface fade en expérience vivante : un bouton qui « pop » légèrement au survol, une modal qui s'invite avec un léger overshoot, une notification qui glisse avec un timing naturel inspiré des lois de la physique. Quatre nombres et tout un univers d'animations devient accessible.

Cet éditeur visuel vous permet d'expérimenter en temps réel les quatre paramètres, de comparer votre courbe avec un easing CSS standard, puis d'exporter le code dans le format adapté à votre stack : CSS pur, transition complète, animation keyframes, Tailwind ou Sass. Réservez 3 à 4 cubic-bezier signature dans votre design system, respectez prefers-reduced-motion, animez uniquement transform et opacity, et vos interfaces gagneront immédiatement en qualité perçue.