Herramientas · CSS · Generador de curvas cubic-bezier
Generador de curvas cubic-bezier
Arrastra una curva para crear un valor de aceleración cubic-bezier(), obsérvala en acción con una transición CSS en vivo, y copia el código.
Añade un archivo y ejecuta la herramienta.
Tu archivo está listo.
Prueba otro archivo, o inténtalo de nuevo.
Ajustes
Ajusta la configuración de abajo. El resultado se actualiza sobre la marcha.
Funciona por completo en tu navegador. No se sube ningún archivo.
Funciona por completo en tu navegador. Nada se sube nunca a un servidor.
Cómo funciona
Arrastra la curva, o escribe directamente los cuatro números X/Y.
Observa la demo de movimiento en vivo: ejecuta una transición CSS real con tu curva.
Copia el valor cubic-bezier() generado.
Preguntas frecuentes
Lo exige el CSS: x es el tiempo, que no puede retroceder ni superar el final de la transición. y es el valor interpolado, que puede sobrepasar legítimamente 1 o bajar de 0, que es justo lo que da su efecto a las curvas tipo resorte o "back".
No. La curva, el gráfico y la demo de movimiento se generan y muestran por completo en tu navegador.
Sí. El mismo valor cubic-bezier() funciona en ambas propiedades.
Es real. El punto de la demo se mueve bajo una transición CSS genuina con tu valor exacto de cubic-bezier() como función de temporización, no una aproximación escrita a mano de las matemáticas.
Guías
Una mirada más de cerca a problemas concretos que resuelve esta herramienta.
Why Easing Matters More Than Duration in UI Animation
Two transitions with the same duration can feel quick or sluggish depending only on their timing curve. What a cubic-bezier curve actually describes, and why the right one makes an interface feel responsive.
Leer la guíaHow to Create a Custom cubic-bezier() Easing Curve for CSS
Start from a preset, drag the two handles, compare the motion against linear and ease at the duration you will really use, and copy both the value and a ready transition line. The steps, with the limits the tool really has.
Leer la guíaAn Overshoot Menu Animation With ease-out-back, and Its Two Bugs
An ease-out-back curve makes a dropdown pop open and settle. It also makes the menu overshoot on the way closed, does nothing on opacity, and can poke out of a clipped container. The whole job, with the fixes.
Leer la guía
Comentarios