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 वाक्यविन्यास का एक शानदार वर्णन है , लेकिन यह आमतौर पर आवश्यक नहीं है जब तक कि आप कुछ बहुत सटीक प्रभाव नहीं चाहते हैं।
असल में, ढील देना धीरे-धीरे बंद करना है, इसमें ढील देना धीरे-धीरे तेज करना है, और रैखिक को न तो करना है। आप MDN के लिए प्रलेखनtiming-function में अधिक विस्तृत संसाधन पा सकते हैं ।
और यदि आप उपर्युक्त सटीक प्रभाव चाहते हैं, तो आपके लिए अद्भुत LE Verou's cubic-bezier.com है! यह अलग-अलग समय के कार्यों की तुलनात्मक रूप से करने के लिए भी उपयोगी है।
एक और, समय समारोह , की तरह काम करता है, लेकिन केवल संक्रमण की शुरुआत और उसके अंत के बीच चरणों की एक सीमित संख्या प्रदर्शन करती है। संक्रमण के बजाय CSS3 के एनिमेशन में मेरे लिए सबसे उपयोगी रहा है; एक अच्छा उदाहरण डॉट्स के साथ संकेतक लोड करने में है। परंपरागत रूप से, एक गति के भ्रम को उत्पन्न करने के लिए स्थिर चित्रों की श्रृंखला (आठ डॉट्स, दो बदलते रंग प्रत्येक फ्रेम) का उपयोग करता है। एक एनीमेशन और एक परिवर्तन के साथ, आप अलग फ्रेम के भ्रम को उत्पन्न करने के लिए गति का उपयोग कर रहे हैं! कितना मज्जेदार।steps()linearsteps()steps(8)rotate