Editor de bezier cúbico

Funciones de Editor de bezier cúbico

• 01

  Arrastra la curva, ve el movimiento

  Dos asas arrastrables controlan el principio y el final del bezier. La animación de bola acompañante reproduce la curva en la duración que elijas, para que puedas previsualizador el overshoot y el sentimiento de ease-out sin dejar la página.

• 02

  Todos los preestablecidos estándar

  Comienza desde el ease, linear, ease-in, ease-out y ease-in-out incorporados de CSS — luego ajusta. El cambio de preestablecido vuelve a "personalizado" automáticamente cuando mueves un asa.

• 03

  Copia CSS con un clic

  El valor cubic-bezier() se actualiza en vivo con precisión de dos decimales, listo para soltar en transition-timing-function o animation-timing-function.

Preguntas frecuentes sobre Editor de bezier cúbico

¿Por qué los valores Y pueden ir por encima de 1 o por debajo de 0?

Los puntos de control de Bezier fuera del rango 0–1 producen efectos de overshoot y undershoot — la curva va más allá de su punto final antes de asentarse. Así es cómo se hacen curvas de suavizado "bouncy"; el eje X todavía tiene que estar en 0–1.

¿Cómo uso la salida?

Copia la cadena cubic-bezier(...) y pégala en cualquier valor CSS transition-timing-function o animation-timing-function. Funciona en todos los navegadores modernos.

¿Es la vista previa precisa a lo que CSS hará?

Sí — la vista previa anima una bola del 0 al 100% usando la misma fórmula cubic bezier que los navegadores usan para transiciones. El control deslizante de duración te permite sentir curvas lentas vs rápidas antes de comprometerte.

¿Qué significa realmente ease-in-out?

Ease-in-out comienza lentamente, acelera en medio y se ralentiza nuevamente al final — la curva cubic-bezier(0.42, 0, 0.58, 1). Es el predeterminado para la mayoría del movimiento de UI pulido porque refleja cómo los objetos físicos reales aceleran y desaceleran.