Como creo unha curva de aceleración cubic-bezier personalizada para CSS?

Arrastra os dous tiradores de punto de control no gráfico, escribe valores exactos x1, y1, x2, y2 ou escolle un preaxuste. Despois escolle CSS en Formato de saída e fai clic en Copiar para obter o valor cubic-bezier() para transition-timing-function.

Como fago un efecto de rebote ou sobreimpulso con cubic-bezier?

Arrastra un tirador por riba ou por debaixo do cadro para que o seu valor Y pase de 0-1. Y pode exceder ese rango, mentres que X permanece entre 0 e 1. Os preaxustes de retroceso e anticipación son puntos de partida de sobreimpulso listos para usar.

Podo obter a aceleración para Tailwind, Framer Motion ou anime.js?

Si. As lapelas de formato de saída son CSS, Tailwind, Framer Motion e anime.js. Todas formatean os mesmos catro números, así que escolle unha lapela e fai clic en Copiar para poñer o fragmento no teu portapapeis.

Como cargo un valor cubic-bezier existente para editalo?

Pega un valor como cubic-bezier(.17, .67, .83, .67) no cadro de importación e fai clic en Cargar. Se non se poden ler catro números, recibes unha mensaxe de erro. A curva tamén se almacena no URL da páxina despois do hash, polo que se pode compartir.

Por que a vista previa parece máis lenta que as miñas transicións reais?

A Vista previa do movemento usa unha configuración de Duración que podes cambiar, e os valores predeterminados son máis lentos para que poidas estudar a curva. Acorta a Duración e despois usa Repetir para ver o movemento á velocidade que planeas publicar.

Si. Todas as ferramentas son de uso gratuíto, sen conta nin tarxeta de crédito. O traballo execútase no teu dispositivo en lugar de nos nosos servidores, o que permite que sexa gratuíto.

Si. Funciona nos navegadores móbiles actuais en iOS e Android, sen instalar nada.

📈

Xerador de curvas de aceleración CSS cubic-bezier de balde

Deseña curvas de aceleración CSS arrastrando puntos de control, previsualiza o movemento en directo e copia o valor cubic-bezier(). Inclúe preaxustes de sobrepasamento/rebote.

Execútase no teu navegadorSen rexistro, sen ventás emerxentesNon é necesario iniciar sesiónDe balde para sempre

Funciona sen conexión unha vez cargado

Arrastra os controladores verde azulado e rosa para dar forma á curva

Puntos de control

x1y1x2y2

Vista previa do movemento

Duración1,6 s

Transición de ancho

Valor CSS

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

Predefinidos

Os controladores rosa e verde azulado poden estirarse por riba ou por baixo da caixa (Y fóra de 0-1) para crear efectos de 'sobrepasamento' / rebote como back-out e anticipate. X permanece dentro de 0-1 (o tempo non pode inverterse).

Usos habituais

Transición CSS Personalizado EaseDeseña facilidade con sentimentos naturais para efectos de paso, menús e transicións da IU.
Rebotar e Animar OvershootCrea movemento de resorte/rebote lúdico sacando puntos de control máis alá da caixa.
Facilidade para Animacións @keyframesEscolle a función correcta de tempo de animación para animacións de fotograma clave CSS.
Valores de Facilidade para Librarías de Animación JSObtén valores cubic-bezier para GSAP, Framer Motion, anime.js e máis.
Entende Como Funciona a FacilidadeMira a relación entre unha curva bezier e o movemento que produce.

Como funciona

O editor constrúese enteiramente no navegador usando o estado de React e SVG — ningunha biblioteca xestiona a matemática da curva. Dous puntos de control arrastrables definen unha ruta SVG de Bezier cúbica, e o propio motor de animación CSS do navegador executa a vista previa do movemento inxectando o valor cubic-bezier() resultante directamente nunha regra @keyframes.

1
Arrastra ou escribe os puntos de control
Dous puntos de arrastre (P1 en teal, P2 en rosa) sitúanse nun lenzo SVG. O arrastre usa a API Pointer Events con setPointerCapture para que o punto siga o teu dedo ou cursor mesmo fóra dos límites do SVG. Tamén podes axustar os puntos coas teclas de frecha ou escribir valores exactos nas entradas numéricas x1/y1/x2/y2.
2
O SVG debuxa a curva en tempo real
A curva é un único elemento SVG <path> cuxo comando C (Bezier cúbica) se recalcula a partir das catro coordenadas dos puntos de control en cada actualización de estado. Sen lenzo, sen biblioteca externa — o propio renderizador SVG do navegador debuxa a ruta directamente.
3
O motor CSS do navegador previsualiza o suavizado
Tres animacións en directo (un punto deslizante, unha transición de ancho e unha escala) executan @keyframes de CSS co valor cubic-bezier() inxectado en liña. O propio motor de animación do navegador interpreta a curva, así que o que ves é exactamente o que producirá o teu CSS de produción.
4
Copia o fragmento na sintaxe do teu framework
As pestanas formatean os mesmos catro números como unha función CSS transition-timing-function, unha clase de valor arbitrario de Tailwind, un array de suavizado de Framer Motion ou unha cadea de suavizado de anime.js. O fragmento escríbese ao portapapeis con navigator.clipboard. A curva tamén se codifica no hash da URL (#b=x1,y1,x2,y2) para que a poidas compartir ou marcar.