Générateur cubic-bezier
Faites glisser deux points de contrôle pour façonner une courbe d'accélération CSS cubic-bezier(), prévisualisez le mouvement et copiez la fonction de temporisation — le tout dans votre navigateur.
Le générateur cubic-bezier s'exécute entièrement dans votre navigateur. La courbe que vous faites glisser, l'aperçu d'animation et le CSS cubic-bezier() généré ne quittent jamais votre appareil et rien n'est téléversé vers ArrayKit.
Ouvrir le formateur CSS
À propos de Générateur cubic-bezier
Le générateur cubic-bezier vous permet de façonner une courbe d'accélération CSS en faisant glisser ses deux points de contrôle sur un tracé en direct, puis copie la fonction de temporisation exacte cubic-bezier(x1, y1, x2, y2) pour votre transition ou animation. Partez de préréglages nommés comme ease, ease-in-out ou un ease-out-back rebondissant, puis affinez les poignées à la souris ou aux touches fléchées. Un point animé joue votre courbe en temps réel pour que vous ressentiez l'accélération avant de la coller. Il est conçu pour les développeurs front-end et designers qui règlent le mouvement d'une transition-timing-function ou animation-timing-function sans deviner les nombres. Tout se rend sur votre appareil — la courbe, l'aperçu et le CSS généré ne quittent jamais votre navigateur.
Fonctionnalités
- Faites glisser deux points de contrôle sur une courbe en direct pour façonner l'accélération
- Préréglages nommés : linear, ease, ease-in, ease-out, ease-in-out et courbes back
- Un point animé et une démo scale/opacity jouent la courbe en temps réel
- Copie la valeur cubic-bezier() exacte et une règle transition-timing-function prête
- Déplacez chaque poignée aux touches fléchées pour un réglage au pixel près
- Les poignées de dépassement laissent construire des courbes ease-back rebondissantes avec y au-delà de 1
- Les valeurs X se contraignent automatiquement dans la plage 0 à 1 requise par CSS
- Reconnaît et étiquette la courbe actuelle quand elle correspond à un préréglage standard
Comment utiliser Générateur cubic-bezier
- Choisissez un préréglage comme ease-in-out comme point de départ
- Faites glisser l'un ou l'autre point de contrôle pour remodeler la courbe, ou déplacez-le aux touches fléchées
- Observez l'aperçu animé pour ressentir l'accélération que vous avez construite
- Copiez la valeur cubic-bezier() ou la règle transition-timing-function complète
- Collez-la dans votre raccourci CSS transition ou animation
Exemple
Entrée
control point 1: 0.34, 1.56
control point 2: 0.64, 1
Sortie
.card {
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
Une courbe ease-out-back dépasse 1 pour un léger rebond.
Erreurs courantes et dépannage
- Le navigateur ignore mon cubic-bezier() et se rabat sur linear. — Les deux valeurs x doivent être comprises entre 0 et 1. Cet outil les contraint pour vous, mais un x1 ou x2 tapé à la main hors de cette plage rend toute la valeur invalide.
- L'animation paraît raide au début et à la fin. — Éloignez chaque poignée de son extrémité. Les poignées proches de (0,0) et (1,1) ne courbent presque pas la courbe, donc le mouvement reste quasi linéaire.
- Je veux un rebond mais la valeur y revient en arrière. — Faites glisser un point de contrôle au-dessus du haut du tracé pour que son y dépasse 1 (ou passe sous 0). Seul x est contraint ; le dépassement de y est ce qui crée l'anticipation et le rebond.
- Mon préréglage n'est plus reconnu après avoir déplacé une poignée. — Tout changement rend la courbe personnalisée, donc l'étiquette du préréglage disparaît. Recliquez sur la puce du préréglage pour revenir à ses valeurs exactes.
Foire aux questions
- Que signifient les quatre nombres de cubic-bezier() ?
- Ce sont les coordonnées x et y de deux points de contrôle : cubic-bezier(x1, y1, x2, y2). Le début et la fin de la courbe sont fixés à (0,0) et (1,1), et ces deux poignées courbent le chemin entre eux pour définir comment l'animation accélère.
- Pourquoi les valeurs x doivent-elles rester entre 0 et 1 ?
- En CSS l'axe x est la progression de l'animation dans le temps, qui n'avance que vers l'avant. Garder x1 et x2 entre 0 et 1 garantit que la courbe représente une seule valeur à chaque instant. y peut sortir de cette plage pour créer un dépassement ou une anticipation.
- Comment créer une accélération rebondissante ou avec dépassement ?
- Donnez à un point de contrôle un y supérieur à 1 ou inférieur à 0. Par exemple cubic-bezier(0.34, 1.56, 0.64, 1) dépasse la fin avant de se stabiliser, ce qui se lit comme un léger rebond. Faites glisser une poignée au-dessus ou au-dessous du tracé pour cela.
- Quelle est la différence entre ease et ease-in-out ?
- ease est cubic-bezier(0.25, 0.1, 0.25, 1) et démarre un peu plus vite que ease-in-out, qui est cubic-bezier(0.42, 0, 0.58, 1) et symétrique. ease-in-out accélère et ralentit de façon égale, tandis que ease charge légèrement le mouvement au départ.
- Puis-je utiliser cette valeur aussi pour animation-timing-function ?
- Oui. Un cubic-bezier() fonctionne partout où CSS accepte une fonction d'accélération, y compris transition-timing-function, animation-timing-function et l'emplacement de temporisation des raccourcis transition et animation.
- Faire glisser la courbe envoie-t-il quelque chose à un serveur ?
- Non. L'éditeur, l'aperçu animé et le CSS généré sont tous calculés dans votre navigateur avec du JavaScript simple. Rien de votre courbe n'est téléversé vers ArrayKit.
Outils associés
Tous les outils ArrayKit