क्यूबिक-बेज़ियर ईज़िंग संपादक
खींचने योग्य संपादक और लाइव एनिमेशन पूर्वावलोकन के साथ कस्टम cubic-bezier ईज़िंग वक्र डिज़ाइन करें।
ईज़िंग वक्र को आकार देने के लिए दोनों हैंडल खींचें।
transition-timing-function: —;
animation-timing-function: —;
सब कुछ आपके ब्राउज़र में चलता है — कुछ भी अपलोड नहीं होता।
क्यूबिक-बेज़ियर ईज़िंग संपादक के बारे में
क्यूबिक-बेज़िएर ईज़िंग एडिटर CSS ट्रांज़िशन और एनिमेशन के लिए कस्टम टाइमिंग फंक्शन डिज़ाइन करता है। कर्व कैनवास पर दो कंट्रोल हैंडल को खींचें और cubic-bezier(x1, y1, x2, y2) मान लाइव अपडेट होता है; एक एनिमेशन प्रीव्यू ईज़िंग को लीनियर संदर्भ के बगल में चलाता है ताकि आप फर्क महसूस कर सकें, एक समायोज्य अवधि और तुरंत रीप्ले के साथ।
दस प्रीसेट आम शब्दावली को कवर करते हैं — मानक ease, ease-in, ease-out और ease-in-out, साथ ही back और anticipate जैसे अभिव्यंजक कर्व जो अपने एंडपॉइंट से आगे बढ़ जाते हैं, और मैटीरियल-स्टाइल accelerate और decelerate रैंप। इन्हें जैसे हैं वैसे उपयोग करें या किसी अपनी चीज़ की ओर खींचने के लिए शुरुआती बिंदु के रूप में।
आप सटीक कंट्रोल-पॉइंट कोऑर्डिनेट भी टाइप कर सकते हैं, प्रेरणा के लिए रैंडमाइज़ दबा सकते हैं, और या तो साफ cubic-bezier() मान या एक पेस्ट करने के लिए तैयार CSS नियम कॉपी कर सकते हैं। पूरा एडिटर आपके ब्राउज़र में चलता है।
क्यूबिक-बेज़ियर ईज़िंग संपादक का उपयोग कैसे करें
- ईज़िंग को आकार देने के लिए कर्व एडिटर पर दो हैंडल खींचें।
- Replay क्लिक करें और ईज़ किए गए एनिमेशन की लीनियर संदर्भ से तुलना करें, जरूरत हो तो अवधि एडजस्ट करें।
- त्वरित शुरुआती बिंदु के लिए प्रीसेट आज़माएं — ease, back, anticipate, material और अन्य।
- सटीक मानों के लिए संख्यात्मक कंट्रोल-पॉइंट इनपुट से फाइन-ट्यून करें।
- cubic-bezier() मान या पूरा CSS स्निपेट कॉपी करें।