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);
イージング曲線作成の手順
- 1グラフ上の2つのコントロールポイントをドラッグして曲線を編集します。
- 2テストボタンを押して、オブジェクトの移動アニメーション速度を体感確認します。
- 3出力された `transition-timing-function: cubic-bezier(...)` をコピーします。
UIマイクロインタラクションの質感を高める
AppleやGoogleのUIデザインガイドラインにあるような「初速が速く、最後に自然に減速する」上質な操作感は、カスタムベジェ曲線によって作られています。
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.
よくある質問 (FAQ)
関連開発ツール
Popular
すりガラス効果 (Glassmorphism) 生成
リアルタイムプレビューとWebKitプレフィックス付きCSSコード生成
Launch tool→
Popular
多重ボックスシャドウ (box-shadow) 生成
滑らかで自然な多層シャドウ、インセット陰影、光彩エフェクトのCSS作成
Launch tool→
Trending
グラデーション背景生成
線形(Linear)、放射状(Radial)、円錐(Conic)グラデーションの視覚的ビルダー
Launch tool→
8点角丸 (border-radius) 生成
8箇所の制御ポイントで有機的なブロブ（有機曲線）形状を自在にデザイン
Launch tool→