Easing Curve Presets
Control Handle 1 (P1)(0.34, 1.56)
X1 (Time Progression)0.34
Y1 (Value Intensity)1.56
Control Handle 2 (P2)(0.64, 1)
X2 (Time Progression)0.64
Y2 (Value Intensity)1
Test Duration1.2s
Bezier Curve Graph
cubic-bezier(0.34, 1.56, 0.64, 1)Velocity Simulator Race
Custom Cubic-Bezier Easing
★
Linear Constant Reference (0, 0, 1, 1)
—
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
Como desenhar curvas de aceleração
- 1Mova os dois pontos de controle na grade para esculpir a curva de aceleração.
- 2Clique em Testar para comparar o movimento com curvas padrão de transição.
- 3Copie a propriedade CSS `transition-timing-function: cubic-bezier(...)`.
Microinterações com Sensação Tátil Superior
Curvas de Bézier personalizadas conferem sensação de peso, inércia e dinamismo natural aos elementos de interface.
Architecture & Privacy
- Mathematical Bezier Spline calculation: Precise third-order polynomial curve interpolation.
- Elastic Overshoot & Anticipation support: Allows Y coordinates outside [0, 1] for physics-based spring bounce.
- Visual Dual-Track Motion Simulator: Directly compares customized easing against constant linear velocity.
- Tailwind Arbitrary Syntax generator: Outputs clean, copy-ready [transition-timing-function:cubic-bezier(...)] utility.
Perguntas Frequentes (FAQ)
Ferramentas Relacionadas
Popular
Gerador de Glassmorphism CSS (Efeito Vidro Fosco)
Crie cartões translúcidos com efeito de vidro fosco e desfoque em tempo real
Launch tool→
Popular
Gerador de Sombras (box-shadow) CSS em Camadas
Crie sombras suaves, realistas e multicamadas com profundidade inset personalizada
Launch tool→
Trending
Gerador de Gradientes CSS (Linear e Radial)
Crie gradientes lineares, radiais e cônicos com paradas de cores interativas e exportação CSS
Launch tool→
Gerador de Bordas Arredondadas Orgânicas (8 Valores)
Crie formas orgânicas, fluidas e assimétricas usando a sintaxe avançada de 8 valores
Launch tool→