CSS में transition-timing-function प्रॉपर्टी ट्रांजिशन प्रभाव की गति वक्र (speed curve) को परिभाषित करती है। मुख्य मान हैं: linear, ease, ease-in, ease-out, ease-in-out, और cubic-bezier()।
उदाहरण
नीचे दिए गए उदाहरण में, तीन अलग-अलग <div> तत्वों पर अलग-अलग टाइमिंग फंक्शन लागू किए गए हैं ताकि उनके अंतर को देखा जा सके।
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 4s;
}
#effect1 {transition-timing-function: linear;}
#effect2 {transition-timing-function: ease-in;}
#effect3 {transition-timing-function: ease-out;}
div:hover {width: 250px;}
</style>
</head>
<body>
<h1>Transition Effect</h1>
<p>Hover over the div elements and see the transition effect and the speed:</p>
<div id="effect1">linear effect</div><br>
<div id="effect2">ease-in effect</div><br>
<div id="effect3">ease-out effect</div><br>
</body>
</html>
व्याख्या:
- linear: एक समान गति
- ease-in: धीमी शुरुआत
- ease-out: धीमा अंत
