Generador de cubic-bezier
Da forma a una curva de easing CSS personalizada arrastrando los dos puntos de control, mírala competir contra linear (o cualquier otro easing) y luego copia el valor cubic-bezier() o una línea transition lista para usar.
Última actualización:
Arrastra P1 y P2, o selecciona uno y usa las flechas del teclado (Shift = pasos más grandes).
Cómo usar Generador de cubic-bezier
- Empieza con un preset como ease-out, Ease out back o Ease in-out expo.
- Arrastra los dos controladores en el gráfico. P1 da forma al inicio del movimiento y P2 al final; arrastra por encima de 1 o por debajo de 0 para un rebote.
- Pulsa Reproducir para comparar tu curva con linear u otro easing; cambia la duración o activa Bucle.
- Ajusta con precisión con los cuatro campos numéricos o pega un valor como cubic-bezier(0.2, 0.8, 0.2, 1).
- Copia el valor cubic-bezier() o la línea transition completa en tu CSS.
Cómo funciona el easing con cubic-bezier()
Una curva de Bézier cúbica de CSS se define con cuatro puntos: P0 = (0, 0) y P3 = (1, 1) son fijos, y tú eliges P1 = (x1, y1) y P2 = (x2, y2). Para un parámetro t de 0 a 1 la curva es:
B(t) = (1 − t)³·P0 + 3(1 − t)²t·P1 + 3(1 − t)t²·P2 + t³·P3
El navegador busca el t cuya x coincide con la fracción transcurrida de la duración y usa el valor y en ese t como progreso de la animación. Una parte empinada de la curva significa movimiento rápido, una parte plana significa movimiento lento, y los valores y por encima de 1 o por debajo de 0 hacen que el elemento se pase del objetivo.
Curvas de easing populares
| Nombre | cubic-bezier() | Sensación |
|---|---|---|
| ease (predeterminado) | 0.25, 0.1, 0.25, 1 | Inicio rápido, parada suave. Una opción general segura. |
| ease-out | 0, 0, 0.58, 1 | Desacelera. Bueno para elementos que aparecen. |
| ease-in | 0.42, 0, 1, 1 | Acelera. Bueno para elementos que salen. |
| Material standard | 0.4, 0, 0.2, 1 | Movimiento natural en pantalla. |
| Ease out quint | 0.22, 1, 0.36, 1 | Ágil, con fuerte desaceleración. Ideal para menús y ventanas modales. |
| Ease out expo | 0.16, 1, 0.3, 1 | Muy rápido y luego muy suave; se siente premium. |
| Ease out back | 0.34, 1.56, 0.64, 1 | Se pasa y se asienta; aparición divertida. |
| Ease in-out back | 0.68, -0.6, 0.32, 1.6 | Anticipa y luego se pasa. |
Usa el valor en una transición como transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);, o en animaciones con keyframes creadas con el Generador de animaciones CSS.
Preguntas frecuentes
¿Qué significan los cuatro números de cubic-bezier()?
cubic-bezier(x1, y1, x2, y2) da las coordenadas de dos puntos de control, P1 y P2. La curva siempre empieza en (0, 0) y termina en (1, 1). El eje x es el tiempo y el eje y es el progreso, así que la pendiente de la curva es la velocidad en cada momento.
¿Por qué los valores x deben estar entre 0 y 1?
x es el tiempo, y el tiempo tiene que avanzar, así que la especificación CSS exige que x1 y x2 estén en el rango de 0 a 1. Un valor fuera de ese rango invalida toda la declaración y el navegador la ignora. Los valores y pueden ser cualquier número.
¿Cómo creo un efecto de sobrepaso o rebote?
Usa un valor y mayor que 1 o menor que 0. Por ejemplo, cubic-bezier(0.34, 1.56, 0.64, 1) sobrepasa el objetivo y vuelve a asentarse (ease out back). Un solo cubic-bezier puede sobrepasar una vez; para varios rebotes usa keyframes o la función CSS linear().
¿Qué valores cubic-bezier usan las palabras clave de CSS?
ease es cubic-bezier(0.25, 0.1, 0.25, 1), linear es (0, 0, 1, 1), ease-in es (0.42, 0, 1, 1), ease-out es (0, 0, 0.58, 1) y ease-in-out es (0.42, 0, 0.58, 1). ease es el valor predeterminado para transiciones y animaciones.
¿Qué easing debo usar para animaciones de interfaz?
Usa curvas de tipo ease-out para elementos que entran en pantalla (inicio rápido, parada suave), ease-in para elementos que salen y ease-in-out para elementos que se mueven de un lugar a otro de la pantalla. Evita linear para el movimiento; se ve mecánico, salvo en giros continuos.
¿Dónde puedo usar el valor cubic-bezier?
En cualquier lugar donde CSS acepte una función de easing: transition-timing-function, animation-timing-function, los atajos transition y animation, el timing por keyframe y la opción easing de la Web Animations API (element.animate).
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.