Editor CSS de curvas Bézier cúbicas
Mostra curvas de suavização e exporta funções de tempo.
Como 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.
- Digite os valores solicitados no painel de configurações.
- Ajuste a configuração básica e abra o modo avançado para opções de exportação e ajuste fino. A configuração personalizada continua ativa ao fechar o painel.
- Execute o editor CSS de curvas Bézier cúbicas, revise a saída e use os controles disponíveis para copiar ou baixar.
O que esta ferramenta suporta
Mostra curvas de suavização e exporta funções de tempo.
- Controle x1
- Range: 0 to 1
- Controle y1
- Range: -3 to 3
- Controle x2
- Range: 0 to 1
- Controle y2
- Range: -3 to 3
- Duração da prévia (segundos)
- Range: 0.1 to 10
Limites e processamento
As imagens usam o limite existente de 32 megapixels. São permitidas até 100 imagens de origem onde houver suporte. O HTML colado é limitado a 200,000 caracteres; diagramas Mermaid a 20,000 caracteres e 300 linhas. A geração de SVG e PNG exige um navegador.
Perguntas frequentes
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.
Onde minha entrada é processada?
Esta operação processa sua fonte no seu navegador. Copiar e baixar são ações explícitas; a entrada de origem não é salva em conta nem em histórico.
Quais são os limites de entrada?
As imagens usam o limite existente de 32 megapixels. São permitidas até 100 imagens de origem onde houver suporte. O HTML colado é limitado a 200,000 caracteres; diagramas Mermaid a 20,000 caracteres e 300 linhas. A geração de SVG e PNG exige um navegador.