CSS3 संक्रमणों के बीच अंतर 'आसानी से और आसानी से बाहर

Question

CSS3 संक्रमण' ease-in, ease-out, आदि के बीच क्या अंतर है?

Answer 1

CSS3 के संक्रमण और एनिमेशन समर्थन को आसान बनाते हैं, औपचारिक रूप से "टाइमिंग फ़ंक्शन" कहा जाता है। आम ease-in, ease-out, ease-in-out, ease, और linear हैं, या आप cubic-bezier() का उपयोग करके अपना स्वयं का निर्दिष्ट कर सकते हैं।

• ease-in एनीमेशन धीरे-धीरे शुरू करेगा, और पूर्ण गति से समाप्त होगा।
• ease-out पूर्ण गति से एनीमेशन शुरू करेगा, फिर धीरे-धीरे खत्म करें।
• ease-in-out धीरे-धीरे शुरू होगा, एनीमेशन के बीच में सबसे तेज़ हो, फिर धीरे-धीरे खत्म करें।
• easeease-in-out की तरह है, सिवाय इसे छोड़कर यह थोड़ा तेज़ शुरू होता है।
• linear कोई आसान नहीं है।
• अंत में cubic-bezier वाक्यविन्यास का, लेकिन आमतौर पर यह तब तक जरूरी नहीं है जब तक आप कुछ सटीक प्रभाव नहीं चाहते।

असल में, एक ठहराव को धीमा करना आसान है, धीरे-धीरे बढ़ना आसान है, और रैखिक न तो करना है। आप documentation for timing-function on MDN पर अधिक विस्तृत संसाधन पा सकते हैं।

और यदि आप उपर्युक्त सटीक प्रभाव चाहते हैं, तो अद्भुत ली वेरौ का cubic-bezier.com आपके लिए है! ग्राफिकल रूप से विभिन्न समय कार्यों की तुलना करने के लिए यह भी उपयोगी है।

एक और, the steps() timing function, linear जैसा कार्य करता है, लेकिन केवल संक्रमण की शुरुआत और उसके अंत के बीच एक सीमित संख्या में कदम करता है। steps() संक्रमण में बजाए CSS3 एनीमेशन में मेरे लिए सबसे उपयोगी रहा है; एक अच्छा उदाहरण बिंदुओं के साथ संकेतक लोड करने में है। परंपरागत रूप से, गति के भ्रम पैदा करने के लिए, स्थिर छवियों की एक श्रृंखला (आठ बिंदुओं, दो फ्रेम बदलते रंग कहते हैं) का उपयोग करता है। steps(8) एनीमेशन और rotate रूपांतरण के साथ, आप अलग-अलग फ्रेम के भ्रम पैदा करने के लिए गति का उपयोग कर रहे हैं! कितना मज्जेदार।