เครื่องมือสร้างเส้นโค้งการเร่งความเร็ว Cubic Bezier

วิธีใช้เครื่องมือนี้

1. 1

   Click a preset (ease, ease-in, ease-out, or ease-in-out) to load its four control values, or skip this to start from the default ease curve.

2. 2

   Drag the a, b, c, and d sliders to adjust the two control points; each ranges from -1 to 2 in steps of 0.05 and the current value shows above the slider.

3. 3

   Read the generated transition-timing-function: cubic-bezier(a, b, c, d); line in the output box.

4. 4

   Copy that declaration by hand and drop it into your CSS transition or animation rule.

เครื่องมือสร้างเส้นโค้ง Cubic Bezier คืออะไร?

กรณีการใช้งานทั่วไป

• Tuning a button hover or focus transition so it feels snappy on entry and gentle on exit instead of using the generic default ease.

• Designing a card or modal that overshoots slightly on open by pushing the d (P2 y) value above 1 for a subtle bounce.

• Matching a brand motion spec where designers handed you specific cubic-bezier control points to reproduce in CSS.

• Replacing a linear or default easing on a loading spinner or progress bar with a custom acceleration profile.

• Quickly grabbing the canonical values behind ease-in-out without memorizing 0.42, 0, 0.58, 1.

• Prototyping menu slide-in and drawer animations by comparing how ease-in versus ease-out change the perceived weight of the motion.

คำถามที่พบบ่อย