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点击测试按钮，与默认缓动效果进行对比观察。
- 3复制生成的 `transition-timing-function: cubic-bezier(...)` 样式属性。
打造高级微交互的秘密
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
CSS 玻璃拟态 (Glassmorphism) 生成器
实时调节毛玻璃模糊度、透明度与边框高光，导出多浏览器兼容 CSS 代码
Launch tool→
Popular
CSS 柔和多层阴影生成器 (box-shadow)
设计自然柔和的多层平滑阴影与内阴影深度，告别生硬粗糙的传统阴影
Launch tool→
Trending
CSS 多色渐变背景生成器 (Linear & Radial)
交互式可视化构建线性、径向与锥形渐变背景，一键复制纯 CSS 样式
Launch tool→
CSS 8点自适应圆角生成器 (border-radius)
通过 8 个控制点拉伸设计有机流体不规则形状，掌握斜杠语法高级圆角
Launch tool→