Editor CSS de curvas Bézier cúbicas
Previsualiza curvas de suavizado y exporta funciones de tiempo.
Cómo usar Editor CSS de curvas Bézier cúbicas
CSS cubic Bezier editor builds a cubic-bezier() timing function from two control points and animates a ball with it so you can see the easing. The x values range from 0 to 1, the y values from -3 to 3 for overshoot or anticipation, and the preview duration from 0.1 to 10 seconds. Download the result as a transition-timing-function rule in easing.css.
- Introduce los valores solicitados en el panel de ajustes.
- Ajusta la configuración básica y abre el modo avanzado para opciones de exportación y ajuste fino. La configuración personalizada sigue activa al cerrar el panel.
- Ejecuta el editor CSS de curvas Bézier cúbicas, revisa la salida y usa los controles disponibles para copiar o descargar.
Qué admite esta herramienta
Previsualiza curvas de suavizado y exporta funciones de tiempo.
- Control x1
- Range: 0 to 1
- Control y1
- Range: -3 to 3
- Control x2
- Range: 0 to 1
- Control y2
- Range: -3 to 3
- Duración de vista previa (segundos)
- Range: 0.1 to 10
Límites y procesamiento
Las imágenes usan el límite de lienzo existente de 32 megapíxeles. Se permiten hasta 100 imágenes de origen donde sea admitido. El HTML pegado está limitado a 200,000 caracteres; los diagramas Mermaid a 20,000 caracteres y 300 líneas. La generación de SVG y PNG requiere un navegador.
Preguntas frecuentes
Why are the x values limited to 0 to 1 in cubic-bezier?
CSS requires both x coordinates to stay between 0 and 1 so time always moves forward; values outside that range make the function invalid. The y values can go beyond that range, and this editor accepts -3 to 3.
How do I make a bounce or overshoot easing curve?
Set y2 above 1, for example 1.5, so the motion passes the end point before settling, or set y1 below 0 to pull back before starting. The ball preview loops back and forth so you can judge the effect.
Does the easing preview respect reduced motion settings?
Yes. When your system requests reduced motion, the preview animation is turned off. The cubic-bezier value is still generated and downloadable; change the setting temporarily if you need to watch the curve in motion.
¿Dónde se procesa mi entrada?
Esta operación procesa su fuente en tu navegador. Copiar y descargar son acciones explícitas; la entrada de origen no se guarda en una cuenta ni en un historial.
¿Cuáles son los límites de entrada?
Las imágenes usan el límite de lienzo existente de 32 megapíxeles. Se permiten hasta 100 imágenes de origen donde sea admitido. El HTML pegado está limitado a 200,000 caracteres; los diagramas Mermaid a 20,000 caracteres y 300 líneas. La generación de SVG y PNG requiere un navegador.