गुण transition-timing-function
गुण transition-timing-function
सुचारू संक्रमण transition के परिवर्तन की गति (त्वरण)
निर्धारित करता है। उदाहरण के लिए,
पहले धीरे, फिर तेज़, फिर धीरे
आदि।
सिंटैक्स
सिलेक्टर {
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 सेट है, इसलिए एनीमेशन
धीरे-धीरे शुरू होगी और धीरे-धीरे तेज़ होती जाएगी:
<div id="elem"></div>
#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,
जिसकी सहायता से एनीमेशन बनाया जा सकता है