Points clés
- 01Déplacez les deux poignées de point de contrôle pour sculpter la courbe d'accélération visuellement plutôt que de deviner les valeurs numériques.
- 02Une animation de balle en direct joue le timing pour que vous puissiez ressentir le mouvement avant de vous engager.
- 03Les cinq présets CSS intégrés (ease, linear, ease-in, ease-out, ease-in-out) sont disponibles comme points de départ.
- 04La valeur cubic-bezier() se met à jour en direct avec une précision de deux décimales, prête à être collée dans n'importe quelle propriété CSS.
Pourquoi les courbes d'accélération personnalisées sont importantes pour le mouvement UI
Les fonctions de timing intégrées de CSS — ease, ease-in-out, linear — couvrent beaucoup de cas, mais chaque interface a des moments où le comportement par défaut semble légèrement décalé. Une infobulle qui apparaît trop brusquement, une modale qui dépasse à l'ouverture, une barre de progression qui semble mécanique. Les courbes cubic-bezier vous permettent d'ajuster le mouvement pour qu'il semble naturel plutôt que mécanique, mais les quatre nombres dans cubic-bezier(0.4, 0, 0.2, 1) sont presque impossibles à interpréter directement.
L'éditeur cubic-bezier de Handytool transforme ces nombres en une courbe visuelle avec deux poignées déplaçables. Déplacez une poignée et l'animation de balle se joue immédiatement, vous permettant d'itérer par sensation jusqu'à ce que le mouvement corresponde à votre intention. Copiez ensuite la valeur et collez-la dans votre CSS — c'est fait.
Comment concevoir une courbe d'accélération CSS
- 01
Commencez par un preset
Sélectionnez ease, linear, ease-in, ease-out, ou ease-in-out comme base. Les poignées s'alignent aux positions correctes pour chaque preset.
- 02
Déplacez les poignées de point de contrôle
Chaque poignée contrôle une extrémité de la courbe — la poignée de départ façonne l'accélération initiale, la poignée de fin façonne la décélération finale. Déplacer une poignée bascule automatiquement le preset en 'personnalisé'.
- 03
Regardez l'animation de balle
Une balle s'anime de gauche à droite en utilisant votre courbe. Ajustez le curseur de durée pour prévisualiser les transitions lentes par rapport aux rapides.
- 04
Expérimentez avec le dépassement
Déplacez une poignée d'axe Y au-dessus de 1 ou en dessous de 0 pour créer un dépassement et un sous-dépassement — l'effet 'rebondissant' qui fait qu'un menu s'ouvre énergiquement.
- 05
Copiez la valeur CSS
Cliquez sur Copier pour récupérer la chaîne cubic-bezier() et collez-la dans transition-timing-function ou animation-timing-function dans votre feuille de style.
Fonctionne entièrement dans votre navigateur
L'éditeur est un outil autonome du navigateur — aucune police, aucun script, et aucune donnée ne sont chargés après l'ouverture de la page. Déplacer les poignées et prévisualiser les animations fonctionne hors ligne. La formule cubic-bezier utilisée pour la balle d'aperçu est la même que celle utilisée par les navigateurs pour les transitions CSS, donc ce que vous voyez dans l'éditeur est exactement ce que votre feuille de style produira.
Il n'y a rien à installer et rien à signer. Le résultat est une seule valeur CSS — collez-la et c'est fait.
FAQ de l'éditeur Cubic-Bezier
Qu'est-ce qu'une courbe d'accélération cubic-bezier ?
C'est une courbe mathématique définie par deux points de contrôle qui détermine comment une transition ou une animation CSS s'accélère au fil du temps. Les quatre nombres dans cubic-bezier(x1, y1, x2, y2) définissent les positions de ces points de contrôle.
Pourquoi les valeurs Y peuvent-elles dépasser 1 ou descendre en dessous de 0 ?
Les valeurs Y en dehors de 0–1 produisent un dépassement et un sous-dépassement — la courbe dépasse son point final avant de se stabiliser. Cela crée des courbes d'accélération 'rebondissantes'. Les valeurs X doivent rester entre 0 et 1.
Comment utiliser le résultat ?
Copiez la chaîne cubic-bezier(...) et collez-la dans n'importe quelle valeur transition-timing-function ou animation-timing-function CSS. Cela fonctionne dans tous les navigateurs modernes.
Que signifie exactement ease-in-out ?
Ease-in-out commence lentement, s'accélère au milieu, et ralentit à la fin — cubic-bezier(0.42, 0, 0.58, 1). Cela reflète la façon dont les objets réels s'accélèrent et décélèrent et est le choix par défaut pour la plupart des mouvements UI raffinés.
L'aperçu de l'animation de balle est-il exact par rapport à CSS ?
Oui — l'aperçu utilise la même formule cubic bezier que les navigateurs appliquent aux transitions CSS. Le curseur de durée vous permet de ressentir les courbes lentes par rapport aux rapides avant de vous engager.