CSS transition-timing-function प्रॉपर्टी का उपयोग

CSS transition-timing-function प्रॉपर्टी ट्रांजिशन प्रभाव की गति वक्र को निर्दिष्ट करती है। यह निर्धारित करती है कि ट्रांजिशन कैसे प्रगति करेगा - धीमी शुरुआत, धीमा अंत, या एक समान गति।

उदाहरण

नीचे दिए गए उदाहरण में, दो <div> तत्वों पर अलग-अलग टाइमिंग फंक्शन (linear और ease-in) लागू किए गए हैं।

<!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;}
    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>
</body>
</html>

सामान्य मान:

• ease (डिफ़ॉल्ट): धीमी शुरुआत, तेज मध्य, धीमा अंत
• linear: एक समान गति
• ease-in: धीमी शुरुआत
• ease-out: धीमा अंत
• ease-in-out: धीमी शुरुआत और धीमा अंत