Easing

विस्तार से

easing के बिना कोई वस्तु एक ही रफ़्तार से चलती है और गति मशीन जैसी लगती है। easing के साथ वह धीरे शुरू होती है और अंत में धीमी पड़ जाती है (या उलटा), जैसे असली वस्तुएँ करती हैं। CSS में इसके नाम होते हैं जैसे ease, ease-out या ease-in-out, या अपना कर्व cubic-bezier() से लिखा जा सकता है। back या elastic जैसे नाम CSS कर्व नहीं हैं: ये एनिमेशन लाइब्रेरी के नाम हैं, जैसे GSAP।

व्यावहारिक नियम: जो चीज़ सीन में आती है वह आमतौर पर पहुँचकर धीमी होती है (ease-out); जो बाहर जाती है वह आमतौर पर तेज़ होती है (ease-in)। बहुत लचीले कर्व ध्यान खींचते हैं, पर पूरे बैनर में इस्तेमाल हों तो थका देते हैं।

document.querySelector(".cta").animate({ transform: ["translateX(40px)", "none"] }, { duration: 600, easing: "ease-out" });

संबंधित शब्द

कहाँ दिखता है