Editor de curvas Bézier
Arrastra los puntos de control, escribe valores exactos y reproduce la transición antes de copiar la declaración cubic-bezier() generada.
Se ejecuta localmente en tu navegador · cubic-bezier() · CSS timing
Arrastra los puntos de control, escribe valores exactos y reproduce la transición antes de copiar la declaración cubic-bezier() generada.
Se ejecuta localmente en tu navegadorEl editor convierte cuatro puntos de control (x1, y1, x2, y2) en una función cubic-bezier(), dibuja la curva de aceleración resultante y reproduce una transición CSS real con ella. La curva, el código y la vista previa se construyen dentro de la página: la función se compone localmente y no se sube ningún valor.
x1 y x2 se mantienen entre 0 y 1, como exige la gramática de CSS, mientras que y1 e y2 aceptan de −2 a 2, así que las curvas con rebasamiento son posibles. El lienzo dibuja la ventana habitual de −0,5 a 1,5 y se amplía cuando un punto de control la supera, de modo que ningún punto sale del dibujo.
El bloque es una sola regla — .animated-element { transition: transform <duración>ms cubic-bezier(x1, y1, x2, y2); } —, así que el selector y la propiedad animada son marcadores que sustituyes por los tuyos; la función de temporización es lo que produce este editor. Los cuatro números se redondean a dos decimales, igual que aparecen en el panel de código.
El panel de código, la aceleración aplicada al punto de reproducción y el dibujo de la curva leen los mismos cuatro campos, así que la vista previa no puede separarse de la declaración que copias.
El eje x recorre 0–1 en el gráfico y el eje y muestra la ventana de temporización; las líneas verticales marcan cuartos de x y las horizontales cada 0,5 de y dentro del rango visible. Los dos puntos de control se dibujan en sus coordenadas y la curva es la cúbica que pasa por (0,0), los dos manejadores y (1,1).
La ventana visible de y es −0,5 a 1,5 por defecto. Si un punto de control se sale de ella —el preajuste overshoot deja y1 en 1.56 y los campos admiten hasta 2—, la ventana se estira justo lo necesario para que el punto y su tramo de curva sigan dentro del lienzo en lugar de recortarse.
Los valores de x se limitan a 0–1 y los de y a −2–2, la duración a 100–5000 ms, y los números se redondean a dos decimales. El selector de preajustes pasa a una entrada Personalizado en cuanto se edita un valor a mano o se arrastra, de modo que el menú nunca muestra una curva que los campos ya no contienen.
No se sube nada: una vez cargada la página, elegir preajustes, arrastrar, escribir, reproducir, copiar y restablecer no generó ninguna petición de red en las pruebas en en, fr y ja. La vista previa se apoya en la implementación de transiciones CSS del propio navegador, por lo que la página sigue funcionando sin conexión.