CSS Easing Generator
cubic-bezier curve देखकर CSS transition और animation के लिए easing adjust करें।
CURVEease
Curve adjust करने के लिए handles drag करें या numbers edit करें।
Current valuecubic-bezier(0.25, 0.1, 0.25, 1)
PREVIEW
Element उसी easing से move करता है। Values बदलते ही preview फिर चलती है।
CSS
इसे CSS transition या animation के timing function के रूप में इस्तेमाल करें।
.element {
transition: transform 420ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.element.is-active {
transform: translateX(120px);
}इस टूल के बारे में
cubic-bezier curve देखकर CSS transition और animation के लिए easing adjust करें।
- यह टूल आपके browser में चलता है। Files और entered content processing के लिए server पर upload नहीं किए जाते।
उपयोग के उदाहरण
- CSS transitions और animations के लिए easing adjust करना
- Common presets से cubic-bezier motion preview करना
- Adjusted value को CSS code के रूप में copy करना
अक्सर पूछे जाने वाले सवाल
- यह tool क्या कर सकता है?
- cubic-bezier curve देखकर CSS transition और animation के लिए easing adjust करें।
- Input कैसे handle होता है?
- Processing आपके browser में होती है। Files और entered content processing के लिए server पर नहीं भेजे जाते।
- क्या standard CSS easing presets काफी नहीं हैं?
- अक्सर वे काफी होते हैं। UI response या after-motion को थोड़ा और fine-tune करना हो, तो motion preview करते हुए cubic-bezier values adjust करना practical है।