Handytool
डेवलपरमुफ़्तस्थानीय रूप से चलता है

Cubic-bezier editor

CSS cubic-bezier easing curves को visually design करें — handles को ड्रैग करें, motion को preview करें, और CSS को copy करें।

CSS
cubic-bezier(0.25, 0.1, 0.25, 1)
प्रीव्यू
Preset

Lime handles को ड्रैग करें या curve को ट्यून करने के लिए sliders का उपयोग करें।

Cubic-bezier editor के बारे में

Handytool का cubic-bezier editor आपको CSS easing curves को उसी तरह craft करने देता है जैसे वे design होने का intended है — दो control points को ड्रैग करके जब तक motion सही न लगे। एक familiar preset (ease, linear, ease-in-out) से शुरू करें और वहाँ से tune करें, या freely handles को move करें अपना खुद का invent करने के लिए। एक live ball animation curve को play करता है ताकि आप page छोड़े बिना timing को feel कर सकें।

Cubic-bezier editor की विशेषताएँ

  • 01

    Drag the curve, see the motion

    दो draggable handles bezier की शुरुआत और अंत को control करते हैं। Accompanying ball animation curve को duration के साथ play करता है जो आप choose करते हैं, ताकि आप overshoot और ease-out feel को preview कर सकें page छोड़े बिना।

  • 02

    सभी standard presets

    CSS के built-in ease, linear, ease-in, ease-out, और ease-in-out से शुरू करें — फिर tune करें। Preset automatically switch हो जाता है "custom" पर जब आप एक handle move करते हैं।

  • 03

    एक click के साथ copy CSS

    cubic-bezier() value two-decimal precision के साथ live update होता है, ready transition-timing-function या animation-timing-function में drop करने के लिए।

Cubic-bezier editor अक्सर पूछे जाने वाले प्रश्न

Y values 1 से ऊपर या 0 से नीचे क्यों जा सकते हैं?
Bezier control points 0–1 range के बाहर overshoot और undershoot effects produce करते हैं — curve अपने endpoint से पहले जाता है settle होने से पहले। यह "bouncy" easing curves कैसे बनाए जाते हैं; X axis को अभी भी 0–1 में stay करना होता है।
मैं output को कैसे उपयोग करूँ?
cubic-bezier(...) string को copy करें और किसी भी CSS transition-timing-function या animation-timing-function value में paste करें। यह हर modern browser में काम करता है।
क्या preview accurate है जो CSS करेगा?
हाँ — preview एक ball को 0 से 100% तक animate करता है same cubic bezier formula का उपयोग करके जो browsers transitions के लिए उपयोग करते हैं। Duration slider आपको slow vs fast curves को feel करने देता है commit करने से पहले।
Ease-in-out का वास्तव में मतलब क्या है?
Ease-in-out slow शुरू होता है, middle में speed up करता है, और फिर से end पर slow down करता है — cubic-bezier(0.42, 0, 0.58, 1) curve। यह अधिकांश polished UI motion के लिए default है क्योंकि यह real physical objects को mirror करता है कैसे accelerate और decelerate करते हैं।

संबंधित टूल

डेवलपर →

अन्य टूल्स देखें

सभी टूल →