गुण transition-timing-function

गुण transition-timing-function सुचारू संक्रमण transition के परिवर्तन की गति (त्वरण) निर्धारित करता है। उदाहरण के लिए, पहले धीरे, फिर तेज़, फिर धीरे आदि।

सिंटैक्स

cssसिलेक्टर {
  transition-timing-function: मान;
}

मान

मान	विवरण
`ease`	पहले धीरे, फिर तेज़, अंत में फिर से धीरे।
`ease-in`	धीरे शुरू होता है और धीरे-धीरे गति बढ़ाता है।
`ease-out`	तेज़ी से शुरू होता है और धीरे-धीरे रुकता है।
`ease-in-out`	पहले धीरे, फिर तेज़, अंत में फिर से धीरे। यह ease से गति में भिन्न है।
`linear`	हमेशा एक ही गति।
`step-start`	कोई एनीमेशन नहीं, गुण तुरंत अंतिम मान ले लेता है।
`step-end`	कोई एनीमेशन नहीं, गुण `transition-duraton` में निर्धारित समय तक प्रतीक्षा करता है, और फिर तुरंत अंतिम मान ले लेता है।
`steps`	गुण का मान छलांग लगाकर बदलता है।
`cubic-bezier`	बेज़ियर वक्र, जो मनमाना एनीमेशन निर्दिष्ट कर सकता है। देखें बेज़ियर वक्र जनरेटर।

डिफ़ॉल्ट मान: ease.

विभिन्न मानों की तुलना

सभी प्रकार के टाइमिंग फ़ंक्शन के काम को देखने के लिए नीचे दिए गए ब्लॉक्स पर माउस ले जाएँ:

उदाहरण

ब्लॉक पर माउस ले जाएँ - यह 2 सेकंड में अपनी चौड़ाई सुचारू रूप से बदल देगा। चूंकि मान ease-in सेट है, इसलिए एनीमेशन धीरे-धीरे शुरू होगी और धीरे-धीरे तेज़ होती जाएगी:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-timing-function: ease-in;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

यह भी देखें

गुण transition-duration,
जो सुचारू संक्रमण की अवधि निर्धारित करता है
गुण transition-property,
जो सुचारू संक्रमण के लिए गुण का नाम निर्धारित करता है
गुण transition-delay,
जो सुचारू संक्रमण से पहले देरी निर्धारित करता है
गुण transition,
जो सुचारू संक्रमण के लिए संक्षिप्त रूप है
गुण animation,
जिसकी सहायता से एनीमेशन बनाया जा सकता है