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);
Comment façonner des courbes de transition
- 1Déplacez les deux points de contrôle sur la grille pour sculpter la courbe.
- 2Cliquez sur Tester pour comparer la cinétique avec les courbes par défaut.
- 3Copiez la propriété CSS `transition-timing-function: cubic-bezier(...)`.
Micro-interactions à Haute Sensation Tactile
Les courbes de Bézier personnalisées insufflent une sensation d'élan, de poids et de dynamisme naturel aux éléments d'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.
Foire Aux Questions (FAQ)
Outils Similaires
Popular
Générateur de Glassmorphisme CSS (Effet Verre Dépoli)
Concevez des cartes en verre translucide avec flou d'arrière-plan en temps réel
Launch tool→
Popular
Générateur d'Ombres CSS Multicouches (box-shadow)
Créez des ombres portées réalistes, diffuses et élégantes avec profondeur inset
Launch tool→
Trending
Générateur de Dégradés CSS (Linéaire & Radial)
Composez des dégradés linéaires, radiaux et coniques avec export CSS instantané
Launch tool→
Générateur de Rayon de Bordure CSS Organique (8 Valeurs)
Créez des formes organiques et asymétriques grâce à la syntaxe avancée à 8 valeurs
Launch tool→