Com puc crear una corba d'easing cubic-bezier personalitzada per a CSS?

Arrossegueu els dos punts de control al gràfic, escriviu els valors exactes x1, y1, x2, y2 o trieu un predefinit. Després trieu CSS a Format de sortida i feu clic a Copiar per obtenir el valor cubic-bezier() per a transition-timing-function.

Com puc fer un efecte de rebot o sobreimpuls amb cubic-bezier?

Arrossegueu un punt de control per sobre o per sota del quadre perquè el seu valor Y superi 0-1. Y pot excedir aquest rang, mentre que X es manté entre 0 i 1. Els predefinits de sortida posterior i anticipació són punts de partida de sobreimpuls ja fets.

Puc obtenir l'easing per a Tailwind, Framer Motion o anime.js?

Sí. Les pestanyes de format de sortida són CSS, Tailwind, Framer Motion i anime.js. Totes donen format als mateixos quatre números, així que trieu una pestanya i feu clic a Copiar per posar el fragment al porta-retalls.

Com puc carregar un valor cubic-bezier existent per editar-lo?

Enganxeu un valor com ara cubic-bezier(.17, .67, .83, .67) al quadre d'importació i feu clic a Carrega. Si no es poden llegir quatre números, rebreu un missatge d'error. La corba també s'emmagatzema a l'URL de la pàgina després del hash, de manera que es pot compartir.

Per què la previsualització se sent més lenta que les meves transicions reals?

La Previsualització del moviment utilitza una configuració de Durada que podeu canviar, i els valors predeterminats són més lents perquè pugueu estudiar la corba. Escurceu la Durada i després utilitzeu Reproduir per veure el moviment a la velocitat que teniu previst implementar.

És realment gratuït?

Sí. Totes les eines són gratuïtes, sense compte ni targeta de crèdit. El treball s'executa al teu dispositiu en lloc dels nostres servidors, i això és el que permet que sigui gratuït.

Sí. Funciona als navegadors mòbils actuals d'iOS i Android, sense instal·lar res.

📈

Generador d'easing CSS Cubic-Bezier de franc

Dissenya corbes d'easing CSS arrossegant punts de control, previsualitza el moviment en viu i copia el valor cubic-bezier(). Inclou presets de sobreimpuls/rebot.

S'executa al teu navegadorSense registre, sense finestres emergentsNo cal iniciar sessióGratuït per sempre

Funciona sense connexió un cop carregat

Arrossegueu els punts blau verdós i rosa per donar forma a la corba

Punts de control

x1y1x2y2

Previsualització del moviment

Durada1,6 s

Transició d'amplada

Valor CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Predefinits

Els punts rosa i blau verdós poden sortir per sobre o per sota del quadre (Y fora de 0–1) per crear efectes de ‚sobrepassament' / rebot com back-out i anticipate. X es manté dins de 0–1 (el temps no pot invertir-se).

Usos habituals

Alleugement de transició CSS personalitzatDissenyau alleugement de sensació natural per als efectes de manteniment, menús i transicions de UI.
Animacions de rebota i superacióCrea un moviment moll/rebota divertit arrossegant els punts de control més allà de la caixa.
Alleugement per a animacions @keyframesTrieu la funció correcta de temporització d'animació per a animacions CSS keyframe.
Valors d'alleugement per a biblioteques d'animació JSObtingueu valors de Bezier cúbic per a GSAP, Framer Motion, anime.js i més.
Comprendre com funciona l'alleugementVeure la relació entre una corba de Bezier i el moviment que produeix.

Com funciona

L'editor està construït completament al navegador utilitzant l'estat de React i SVG — cap biblioteca gestiona la matemàtica de la corba. Dos punts de control arrossegables defineixen un camí SVG de Bezier cúbic, i el propi motor d'animació CSS del navegador executa la previsualització del moviment injectant el valor cubic-bezier() resultant directament en una regla @keyframes.

1
Arrossega o escriu punts de control
Dues nanses (P1 en verd blavós, P2 en rosa) es troben en un canvas SVG. Arrossegar utilitza l'API Pointer Events amb setPointerCapture perquè la nansa segueixi el teu dit o cursor fins i tot fora del límit de l'SVG. També pots ajustar les nanses amb les tecles de fletxa o escriure valors exactes als camps numèrics x1/y1/x2/y2.
2
L'SVG dibuixa la corba en temps real
La corba és un únic element <path> SVG l'ordre C (Bezier cúbic) del qual es torna a calcular a partir de les quatre coordenades de punts de control a cada actualització d'estat. Sense canvas, sense biblioteca externa — el propi renderitzador SVG del navegador dibuixa el camí directament.
3
El motor CSS del navegador previsualitza el suavitzat
Tres animacions en directe (un punt lliscant, una transició d'amplada, i una escala) executen @keyframes de CSS amb el valor cubic-bezier() injectat en línia. El propi motor d'animació del navegador interpreta la corba, així que el que veus és exactament el que produirà el teu CSS de producció.
4
Copia el fragment en la sintaxi del teu framework
Les pestanyes formaten els mateixos quatre números com una transition-timing-function de CSS, una classe de valor arbitrari de Tailwind, un array d'easing de Framer Motion, o una cadena d'easing d'anime.js. El fragment s'escriu al porta-retalls amb navigator.clipboard. La corba també es codifica al hash de l'URL (#b=x1,y1,x2,y2) perquè la puguis compartir o desar a preferits.