Generador de Curvas de Aceleración CSS
Arrastra los dos tiradores para dar forma a una curva de aceleración personalizada, observa
la bola de vista previa animarla en vivo, y copia el valor cubic-bezier().
Preajustes
Cómo funciona
El gráfico traza el progreso (vertical) frente al tiempo (horizontal) a lo largo de un
segundo. Ambos tiradores son arrastrables directamente, y los campos numéricos de abajo se
mantienen sincronizados con ellos en ambos sentidos; arrastra con el ratón o el dedo, o
escribe valores exactos si necesitas coincidir con una curva concreta. Los mismos cuatro
números alimentan tanto la ruta SVG que estás viendo como la
transition-timing-function real aplicada a la bola de vista previa, así que lo
que ves es la aceleración real, no una aproximación.
Todo se ejecuta sobre el propio motor de transiciones CSS de tu navegador. No se envía a ningún sitio ningún dato de animación o de curva.
Preguntas frecuentes
¿Qué controlan los dos tiradores?
Una curva de aceleración cubic-bezier se define con dos puntos de control, cada uno con una coordenada x (tiempo, de 0 a 1) e y (progreso, sin límite pero normalmente entre 0 y 1). Arrastrar un tirador fija ese punto directamente; los cuatro números que se muestran son exactamente lo que va dentro de cubic-bezier().
¿Puede la curva sobrepasar el 100%?
Sí, si el valor y de un punto de control sube por encima de 1 o baja de 0, la animación sobrepasará brevemente su valor final o caerá por debajo de su valor inicial antes de asentarse, el efecto de "rebote" o "anticipación". Arrastra un tirador por encima o por debajo del gráfico para probarlo.
¿Se envía esto a algún sitio?
No, la curva y la animación de vista previa se ejecutan por completo en el motor CSS de tu navegador. No se sube nada.