संक्रमण-समय-कार्य - सीएसएस-ट्रिक्स

विषय - सूची:

transition-timing-functionसंपत्ति, सामान्य रूप से के हिस्से के रूप में इस्तेमाल किया transitionआशुलिपि, एक समारोह का वर्णन करता है कि कैसे एक संक्रमण उसकी अवधि से अधिक आगे बढ़ना होगा, अपने पाठ्यक्रम के दौरान परिवर्तन की गति के लिए एक संक्रमण की इजाजत दी परिभाषित करने के लिए प्रयोग किया जाता है।

.example ( transition-timing-function: ease-out; )

इन समय कार्यों को आमतौर पर आसान कार्य कहा जाता है, और एक पूर्वनिर्धारित कीवर्ड मान, एक स्टेपिंग फ़ंक्शन, या क्यूबिक बेज़ियर वक्र का उपयोग करके परिभाषित किया जा सकता है।

पूर्वनिर्धारित खोजशब्द मूल्य इस प्रकार हैं:

आराम
रैखिक
आराम से
आराम से
आसानी से अंदर-बाहर
कदम शुरू
चरण-अंत

कुछ मानों के लिए, प्रभाव तब तक स्पष्ट नहीं हो सकता जब तक कि संक्रमण अवधि एक बड़े मूल्य पर सेट न हो।

प्रत्येक पूर्वनिर्धारित कीवर्ड में एक बराबर क्यूबियर बेज़ियर वक्र मान या समकक्ष स्टेपिंग फ़ंक्शन मान होता है। उदाहरण के लिए, निम्नलिखित दो टाइमिंग फ़ंक्शन मान एक-दूसरे के बराबर होंगे:

.example ( transition-timing-function: ease-out; ) .example-2 ( transition-timing-function: cubic-bezier(0, 0, 0.58, 1); )

निम्नलिखित दो के रूप में होगा:

.example ( transition-timing-function: step-start; ) .example-2 ( transition-timing-function: steps(1, start); )

चरणों () और Bézier घटता का उपयोग करना

steps()समारोह आप समय समारोह के लिए अंतराल निर्दिष्ट करने के लिए अनुमति देता है। यह एक या दो मापदंडों को लेता है, एक अल्पविराम द्वारा अलग किया जाता है: एक सकारात्मक पूर्णांक और startया तो का वैकल्पिक मूल्य end। यदि कोई दूसरा पैरामीटर शामिल नहीं है, तो यह डिफ़ॉल्ट हो जाएगा end।

स्टेपिंग फ़ंक्शंस को समझने के लिए, यहां एक डेमो है जो steps(4, start)बाईं ओर बॉक्स के लिए उपयोग करता है , और steps(4, end)दाईं ओर बॉक्स के लिए (बॉक्स पर होवर या संक्रमण को देखने के लिए फ़्रेम को पुनः लोड करें):

इस पेन को देखें!

जब startनिर्दिष्ट किया जाता है, तो मूल्यों का परिवर्तन प्रत्येक अंतराल की शुरुआत में होता है, जबकि प्रत्येक अंतराल endके अंत में मूल्यों का परिवर्तन होता है।

बेज़ियर वक्र मानों पर एक विस्तृत नज़र इस संदर्भ के दायरे से परे है, हालांकि उन उपकरणों के लिए संबंधित लिंक अनुभाग में संदर्भ देखें जो यह प्रदर्शित करते हैं कि ये मान कैसे काम करते हैं।

सभी सहायक ब्राउज़रों में अनुकूलता के लिए, विक्रेता उपसर्गों की आवश्यकता होती है, अंतिम रूप से घोषित मानक सिंटैक्स के साथ:

.example ( -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; )

IE10 (समर्थन करने के लिए IE का पहला स्थिर संस्करण transition-timing-function) -ms-उपसर्ग की आवश्यकता नहीं है ।