CSS Cubic Bezier Faasing Generator
Craft CSS cúbico-bezier flexibilização curvas arrastando pontos de controle e assistir a facilidade jogar ao vivo, em seguida, copiar a função de tempo.
Something went wrong
Drag the control points
Presets
Animation preview
CSS
How to use Cubic Bezier Generator
- Arraste os pontos de controle azul e rosa na curva, ou digite valores de x1, y1, x2, y2 para as entradas.
- Clique em uma predefinição, como facilidade de entrada ou facilidade de saída para carregar uma curva de alívio comum ou superior.
- Assista ao ponto animar com sua facilidade, pressione Play para replay, em seguida, clique em Copiar CSS para agarrar a regra cúbico-bezier.
O que é {nome}?
O Cubic Bezier Generator é um editor interativo para curvas de facilitação de CSS. Arraste os dois pontos de controle na curva unit-square para moldar como uma animação acelera e desacelera, então leia os valores exatos cubic-bezier() de volta nas quatro entradas numéricas — ou digite valores diretamente para mover as alças.
Control-point Y valores podem ir além de 0 e 1, para que você possa construir flexibilização e antecipação como efeitos de volta e salto. Uma pré-visualização de animação integrada move um ponto através da faixa usando sua curva como a função transition-timing-function, reproduzindo automaticamente sempre que você mudar um valor ou pressionar Play.
Todo o cálculo acontece no seu navegador. Quando a curva parecer correta, copie a linha de função de tempo pronta para usar em seu CSS.
FAQ
- O que o cubble-bezier() faz no CSS?
- cubble-bezier () define uma curva de facilidade personalizada para transições e animações usando dois pontos de controle (x1, y1, x2, y2). Ele controla a velocidade da animação ao longo do tempo, permitindo que você crie efeitos além da facilidade incorporada, facilidade e facilidade-out palavras-chave.
- Por que os valores de Y podem ir abaixo de 0 ou acima de 1?
- Os valores de X são apertados para 0-1 porque o tempo não pode correr para trás, mas os valores de Y podem se estender além da faixa de 0-1 para criar sobreposição e antecipação. É assim que as facilidades de 'volta' e 'pular' passam brevemente ou antes do alvo antes de se estabelecer.
- Como faço para usar a curva gerada?
- Copie o valor cúbico-bezier () em uma declaração de transição ou animação, por exemplo: transição: todos os 0,3s cúbico-bezier( 0,42, 0, 0,58, 1);. O gerador também produz uma linha de transição-timing-função pronta que você pode colar diretamente.
Related tools
- Clip Path Generator
- CSS Gradient Generator
- Box Shadow Generator
- Color Palette Generator
- Keyframes Animation Generator
- CSS Transform Generator
Author
Full-Stack Developer & Tools Architect
Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.
People also use
- CSS Transform Generator🗄️ Developer Tools
Build CSS transforms visually — translate, scale, rotate, skew plus 3D rotateX/Y/Z and perspective. Live preview on a grid and copy the CSS, in-browser.
- Keyframes Animation Generator🗄️ Developer Tools
Build CSS @keyframes animations — fade, slide, bounce, pulse, spin, flip, zoom — tune duration, easing, delay and loop, preview live and copy the CSS.
- Border Radius Generator🗄️ Developer Tools
Visually craft CSS border-radius — independent corners, px/%/em units, and organic blob shapes. Live preview and copy-paste CSS. Runs in your browser.
Last updated: