¿Cómo creo una curva de easing cubic-bezier personalizada para CSS?

Arrastra los dos tiradores de punto de control en la gráfica, escribe valores exactos x1, y1, x2, y2 o elige un preajuste. Luego elige CSS en Formato de salida y haz clic en Copiar para obtener el valor cubic-bezier() para transition-timing-function.

¿Cómo hago un efecto de rebote o sobreimpulso con cubic-bezier?

Arrastra un tirador por encima o por debajo del cuadro para que su valor Y supere 0-1. Y puede exceder ese rango, mientras que X se mantiene entre 0 y 1. Los preajustes de retroceso y anticipación son puntos de partida de sobreimpulso ya preparados.

¿Puedo obtener el easing para Tailwind, Framer Motion o anime.js?

Sí. Las pestañas de formato de salida son CSS, Tailwind, Framer Motion y anime.js. Todas formatean los mismos cuatro números, así que elige una pestaña y haz clic en Copiar para poner el fragmento en tu portapapeles.

¿Cómo cargo un valor cubic-bezier existente para editarlo?

Pega un valor como cubic-bezier(.17, .67, .83, .67) en el cuadro de importación y haz clic en Cargar. Si no se pueden leer cuatro números, aparece un mensaje de error. La curva también se guarda en la URL de la página tras el hash, para que se pueda compartir.

¿Por qué la vista previa se siente más lenta que mis transiciones reales?

La Vista previa de movimiento usa un ajuste de Duración que puedes cambiar, y los valores predeterminados son más lentos para que puedas estudiar la curva. Acorta la Duración y luego usa Repetir para ver el movimiento a la velocidad que planeas publicar.

¿Es realmente gratis?

Sí. Todas las herramientas son gratis, sin cuenta y sin tarjeta de crédito. El trabajo se hace en tu dispositivo y no en nuestros servidores, y eso es lo que permite que siga siendo gratis.

¿Funciona en móvil?

Sí. Funciona en los navegadores móviles actuales de iOS y Android, sin instalar nada.

📈

Generador de easing cubic-bezier para CSS gratis

Diseñe curvas de easing en CSS arrastrando puntos de control, vea una vista previa del movimiento en vivo y copie el valor de cubic-bezier(). Incluye preajustes de sobreimpulso/rebote.

Se ejecuta en tu navegadorSin registro, sin ventanas emergentesSin necesidad de registroGratis para siempre

Funciona sin conexión una vez cargado

Arrastra los controles verde azulado y rosa para dar forma a la curva

Puntos de control

x1y1x2y2

Vista previa de movimiento

Duración1,6s

Transición de ancho

Valor CSS

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

Ajustes predefinidos

Los controles rosa y verde azulado pueden desplazarse por encima o por debajo del cuadro (Y fuera del rango 0-1) para crear efectos de 'sobreimpulso'/rebote como back-out y anticipate. X permanece en el rango 0-1 (el tiempo no puede retroceder).

Usos habituales

Transición CSS Personalizada EasingDiseña easing natural para efectos hover, menús y transiciones de UI.
Animaciones de Rebote y SobreimpulsoCrea movimiento de primavera/rebote lúdico tirando de puntos de control más allá de la caja.
Easing para Animaciones @keyframesElige la animation-timing-function correcta para animaciones de keyframe CSS.
Valores Easing para Librerías de Animación JSObtén valores de cubic-bezier para GSAP, Framer Motion, anime.js y más.
Entiende Cómo Funciona EasingVe la relación entre una curva de bezier y el movimiento que produce.

Cómo funciona

El editor está construido enteramente en el navegador usando el estado de React y SVG: ninguna biblioteca gestiona la matemática de la curva. Dos puntos de control arrastrables definen una ruta cúbica de Bézier en SVG, y el propio motor de animación CSS del navegador ejecuta la vista previa de movimiento inyectando el valor cubic-bezier() resultante directamente en una regla @keyframes.

1
Arrastra o escribe puntos de control
Dos controles (P1 en verde azulado, P2 en rosado) se sitúan en un lienzo SVG. Arrastrar usa la Pointer Events API con setPointerCapture para que el control siga tu dedo o cursor incluso fuera del límite del SVG. También puedes desplazar los controles con las teclas de flecha o escribir valores exactos en las entradas numéricas x1/y1/x2/y2.
2
SVG dibuja la curva en tiempo real
La curva es un único elemento SVG <path> cuyo comando C (Bézier cúbico) se recalcula a partir de las cuatro coordenadas de los puntos de control en cada actualización de estado. Sin canvas, sin biblioteca externa: el propio renderizador SVG del navegador dibuja la ruta directamente.
3
El motor CSS del navegador previsualiza el easing
Tres animaciones en vivo (un punto deslizante, una transición de ancho y una escala) ejecutan @keyframes de CSS con el valor cubic-bezier() inyectado en línea. El propio motor de animación del navegador interpreta la curva, así que lo que ves es exactamente lo que producirá tu CSS en producción.
4
Copia el fragmento en la sintaxis de tu framework
Las pestañas formatean los mismos cuatro números como una transition-timing-function de CSS, una clase de valor arbitrario de Tailwind, un arreglo de easing de Framer Motion, o una cadena de easing de anime.js. El fragmento se escribe en el portapapeles con navigator.clipboard. La curva también se codifica en el hash de la URL (#b=x1,y1,x2,y2) para que puedas compartirla o guardarla en marcadores.