Categoría: Desarrollo
Generador de curvas cúbicas de Bézier
Diseña una curva de suavizado CSS personalizada
Arrastra dos puntos de control para dar forma a una función de temporización cubic-bezier(), observa cómo se actualizan en vivo la curva y una vista previa en movimiento, y copia la declaración final de animation-timing-function. La curva se calcula en tu navegador.
Progreso al 50 % de la duración: 0.802
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
El suavizado de una transición o animación CSS es una curva cúbica de Bézier que va de (0,0) a (1,1): los dos puntos intermedios deciden si el movimiento empieza lento y termina rápido, se pasa de largo, o algo distinto por completo. Las palabras clave predefinidas (ease, ease-in-out, etc.) son solo cinco puntos fijos dentro de ese espacio. Esta herramienta traza la curva a partir de los dos puntos de control que defines, muestra una caja moviéndose con esa función de temporización exacta y calcula cuánto avanza el progreso suavizado en la mitad del recorrido, el dato más difícil de imaginar solo con la curva.
Cómo se usa
- Parte de un preajuste o define los dos puntos de control directamente.
- Observa cómo se actualizan la curva y la vista previa en movimiento.
- Copia la declaración cubic-bezier() en tu transición o animación.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Se calcula algo en un servidor?
- No. La curva, la vista previa en movimiento y el dato de progreso se calculan con JavaScript ejecutado en la página.
- ¿Por qué los dos valores de X están limitados entre 0 y 1?
- X representa el tiempo transcurrido, y la especificación CSS exige que avance de 0 a 1 para que la curva siga siendo una función válida del tiempo. Y es el progreso suavizado y puede bajar de 0 o subir de 1, que es como se construye un rebote o un exceso de recorrido.
- ¿Qué significa el dato de la mitad del recorrido?
- Es el progreso suavizado —no el progreso lineal— en el momento en que ha transcurrido exactamente la mitad de la duración de la animación. Un valor superior al 50 % ahí indica que el movimiento ya va por delante de un ritmo lineal en el punto medio.