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.
Funciona por completo en tu navegador. No se sube ningún archivo.
Tu archivo está listo.
Prueba otro archivo, o inténtalo de nuevo.
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.
Comentarios