Puntos clave
- 01Arrastra los dos puntos de control para esculpir la curva de easing visualmente en lugar de adivinar valores numéricos.
- 02Una animación de bola en vivo reproduce el tiempo para que puedas sentir el movimiento antes de confirmarlo.
- 03Los cinco presets CSS integrados (ease, linear, ease-in, ease-out, ease-in-out) están disponibles como puntos de partida.
- 04El valor cubic-bezier() se actualiza en vivo con precisión de dos decimales, listo para pegar en cualquier propiedad CSS.
Por qué las curvas de easing personalizadas importan para el movimiento de la interfaz
Las funciones de tiempo integradas de CSS — ease, ease-in-out, linear — cubren mucho terreno, pero cada interfaz tiene momentos donde el valor predeterminado se siente ligeramente incorrecto. Un tooltip que aparece demasiado rápido, un modal que se pasa al abrir, una barra de progreso que se siente mecánica. Las curvas cubic-bezier te permiten ajustar el movimiento para que se sienta natural en lugar de mecánico, pero los cuatro números en cubic-bezier(0.4, 0, 0.2, 1) son casi imposibles de entender directamente.
El editor cubic-bezier de Handytool convierte esos números en una curva visual con dos puntos de control arrastrables. Mueve un punto y la animación de la bola se reproduce inmediatamente, para que puedas iterar por sensación hasta que el movimiento coincida con tu intención. Luego copia el valor y colócalo en tu CSS — listo.
Cómo diseñar una curva de easing CSS
- 01
Comienza con un preset
Selecciona ease, linear, ease-in, ease-out o ease-in-out como línea de base. Los puntos se ajustan a las posiciones correctas para cada preset.
- 02
Arrastra los puntos de control
Cada punto controla un extremo de la curva — el punto inicial forma la aceleración inicial, el punto final forma la desaceleración final. Mover un punto cambia automáticamente el preset a 'personalizado'.
- 03
Observa la animación de la bola
Una bola se anima de izquierda a derecha usando tu curva. Ajusta el deslizador de duración para previsualizar transiciones lentas versus rápidas.
- 04
Experimenta con el overshoot
Arrastra un punto del eje Y por encima de 1 o por debajo de 0 para crear overshoot y undershoot — el efecto 'rebotador' que hace que un menú se abra energéticamente.
- 05
Copia el valor CSS
Haz clic en Copiar para obtener la cadena cubic-bezier() y pégala en transition-timing-function o animation-timing-function en tu hoja de estilos.
Se ejecuta completamente en tu navegador
El editor es una herramienta autónoma del navegador — no se cargan fuentes, scripts ni datos después de que se abre la página. Arrastrar puntos y previsualizar animaciones funciona sin conexión. La fórmula cubic-bezier utilizada para la previsualización de la bola es la misma que usan los navegadores para transiciones CSS, por lo que lo que ves en el editor es exactamente lo que tu hoja de estilos producirá.
No hay nada que instalar y nada para lo que registrarse. El resultado es un único valor CSS — pégalo y listo.
Preguntas frecuentes del editor Cubic-Bezier
¿Qué es una curva de easing cubic-bezier?
Es una curva matemática definida por dos puntos de control que determina cómo una transición o animación CSS se acelera a lo largo del tiempo. Los cuatro números en cubic-bezier(x1, y1, x2, y2) establecen las posiciones de esos puntos de control.
¿Por qué los valores Y pueden ir por encima de 1 o por debajo de 0?
Los valores Y fuera de 0–1 producen overshoot y undershoot — la curva va más allá de su punto final antes de estabilizarse. Esto crea curvas de easing 'rebotadoras'. Los valores X deben permanecer en 0–1.
¿Cómo uso el resultado?
Copia la cadena cubic-bezier(...) y pégala en cualquier valor de transition-timing-function o animation-timing-function de CSS. Funciona en todos los navegadores modernos.
¿Qué significa realmente ease-in-out?
Ease-in-out comienza lentamente, se acelera en el medio y se ralentiza al final — cubic-bezier(0.42, 0, 0.58, 1). Refleja cómo los objetos reales se aceleran y desaceleran y es la opción predeterminada para la mayoría del movimiento de interfaz pulido.
¿Es la previsualización de la animación de la bola precisa para CSS?
Sí — la previsualización utiliza la misma fórmula cubic bezier que los navegadores aplican a las transiciones CSS. El deslizador de duración te permite sentir curvas lentas versus rápidas antes de confirmar.