सीएसएस क्यूबिक Bezier आसान जेनरेटर
क्राफ्ट सीएसएस क्यूबिक-bezier नियंत्रण बिंदुओं को खींचकर घटता है और आसान खेलने को लाइव देखती है, फिर टाइम-फंक्शन की प्रतिलिपि बनाएँ।.
Something went wrong
Drag the control points
Presets
Animation preview
CSS
How to use Cubic Bezier Generator
- वक्र पर नीले और गुलाबी नियंत्रण बिंदुओं को खींचें, या x1, y1, x2, y2 मानों को इनपुट में टाइप करें।.
- एक प्रीसेट पर क्लिक करें जैसे कि एक सामान्य या ओवरशूट इज़ी वक्र लोड करने के लिए आसानी से आउट या आसानी से आउट-बैक।.
- अपने ईज़ी के साथ डॉट एनीमेट देखें, प्रेस प्ले इसे फिर से खेलना, फिर क्यूबिक-बेज़ीर नियम को पकड़ने के लिए कॉपी सीएसएस पर क्लिक करें।.
क्यूबिक Bezier जेनरेटर क्या है?
घन Bezier जेनरेटर सीएसएस आसान वक्र के लिए एक इंटरैक्टिव संपादक है। इकाई वर्ग वक्र पर दो नियंत्रण बिंदुओं को आकार देने के लिए खींचें कि एनिमेशन कैसे तेज हो जाता है और डिसेलेरेट हो जाता है, फिर सटीक cubic-bezier ( चार संख्यात्मक इनपुट में वापस मान करता है - या प्रकार मान सीधे हैंडल को स्थानांतरित करने के लिए।
कंट्रोल-पॉइंट Y मान 0 और 1 से परे जा सकते हैं, इसलिए आप ओवरशूट और एंटीसिपेशन का निर्माण कर सकते हैं जैसे बैक और बाउंस इफेक्ट। एक अंतर्निहित एनिमेशन पूर्वावलोकन ट्रैक के पार एक डॉट को स्थानांतरित करता है जो आपके वक्र को ट्रांसमिशन-timing-function के रूप में उपयोग करता है, जब भी आप एक मान या प्रेस प्ले बदलते हैं तो स्वचालित रूप से फिर से खेलना।
सभी गणना आपके ब्राउज़र में होती है। जब वक्र सही महसूस करता है, तो अपने सीएसएस में रेडी-टू-यूज़ टाइमिंग-फंक्शन लाइन को कॉपी करें।
FAQ
- सीएसएस में क्यूबिक-bezier () क्या करता है?
- घन-bezier () दो नियंत्रण बिंदुओं (x1, y1, x2, y2) का उपयोग करके संक्रमण और एनिमेशन के लिए एक कस्टम आसान वक्र को परिभाषित करता है। यह समय के साथ एनिमेशन की गति को नियंत्रित करता है, जिससे आप अंतर्निहित आसानी, आसानी से, और आसानी से आउट कीवर्ड से परे प्रभाव पैदा कर सकते हैं।.
- क्यों Y मान 0 या उससे अधिक 1 से नीचे जा सकते हैं?
- एक्स मान 0-1 तक क्लैंप किए गए हैं क्योंकि समय पीछे नहीं चल सकता है, लेकिन वाई मान ओवरशूट और प्रत्याशा बनाने के लिए 0-1 रेंज में विस्तार कर सकते हैं। यह है कि कैसे 'बैक' और 'विज्ञापन' easings संक्षेप में अतीत में या निपटान से पहले लक्ष्य से पहले चले जाते हैं।.
- मैं उत्पन्न वक्र का उपयोग कैसे करूं?
- क्यूबिक-bezier() मूल्य को संक्रमण या एनिमेशन घोषणा में कॉपी करें, उदाहरण के लिए: संक्रमण: सभी 0.3s घन-bezier(0.42, 0,0.58,1); जनरेटर भी एक तैयार संक्रमण-timing-function लाइन आप सीधे पेस्ट कर सकते हैं उत्पादन।.
Related tools
- Clip Path Generator
- CSS Gradient Generator
- Box Shadow Generator
- Color Palette Generator
- Keyframes Animation Generator
- CSS Transform Generator
Author
Full-Stack Developer & Tools Architect
Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.
People also use
- CSS Transform Generator🗄️ Developer Tools
Build CSS transforms visually — translate, scale, rotate, skew plus 3D rotateX/Y/Z and perspective. Live preview on a grid and copy the CSS, in-browser.
- Keyframes Animation Generator🗄️ Developer Tools
Build CSS @keyframes animations — fade, slide, bounce, pulse, spin, flip, zoom — tune duration, easing, delay and loop, preview live and copy the CSS.
- Border Radius Generator🗄️ Developer Tools
Visually craft CSS border-radius — independent corners, px/%/em units, and organic blob shapes. Live preview and copy-paste CSS. Runs in your browser.
Last updated: