एनिमेशन सीएसएस उदाहरण और तैयार कोड। दो तत्वों के एनिमेटेड लंदन व्हील के नौ सरल CSS3 एनीमेशन उदाहरण

अंतिम अद्यतन: 11/06/2016

एनीमेशन किसी तत्व की शैली को बदलने के लिए बेहतरीन अवसर प्रदान करता है। एक संक्रमण में, हमारे पास प्रारंभिक मूल्यों के साथ गुणों का एक सेट होता है जो संक्रमण शुरू होने से पहले तत्व के पास होता है, और अंतिम मान जो संक्रमण पूरा होने के बाद निर्धारित होते हैं। जबकि एनीमेशन के दौरान हमारे पास मूल्यों के न केवल दो सेट हो सकते हैं - प्रारंभिक और अंतिम, बल्कि मूल्यों के कई मध्यवर्ती सेट भी हो सकते हैं।

एनिमेशन मुख्य फ़्रेमों के क्रमिक परिवर्तन पर निर्भर करता है। प्रत्येक कीफ़्रेम गुणों को चेतन करने के लिए मानों के एक सेट को परिभाषित करता है। और ऐसे मुख्य फ़्रेमों का क्रमिक परिवर्तन वास्तव में एनीमेशन का प्रतिनिधित्व करेगा।

अनिवार्य रूप से, ट्रांज़िशन एक ही मॉडल का उपयोग करते हैं - दो कुंजी फ़्रेम भी अंतर्निहित रूप से परिभाषित होते हैं - एक शुरुआत और एक अंत, और संक्रमण स्वयं प्रारंभ से अंत कुंजी फ़्रेम तक संक्रमण का प्रतिनिधित्व करता है। इस मामले में एनीमेशन के साथ एकमात्र अंतर यह है कि आप एनीमेशन के लिए कई मध्यवर्ती कुंजी फ़्रेम परिभाषित कर सकते हैं।

सामान्य तौर पर, CSS3 में एक मुख्य फ़्रेम घोषणा का रूप निम्न होता है:

@कीफ्रेम एनीमेशन_नाम ((/* प्रारंभिक सीएसएस संपत्ति मूल्य */) से (/* अंतिम सीएसएस संपत्ति मूल्य */))

@keyframes कीवर्ड के बाद एनीमेशन का नाम आता है। फिर घुंघराले ब्रेसिज़ में कम से कम दो मुख्य फ़्रेम परिभाषित किए जाते हैं। from कीवर्ड के बाद का ब्लॉक प्रारंभिक कुंजी फ़्रेम घोषित करता है, और ब्लॉक में to कीवर्ड के बाद अंतिम कुंजी फ़्रेम परिभाषित किया जाता है। प्रत्येक कीफ़्रेम के भीतर, एक या अधिक सीएसएस गुणों को परिभाषित किया जाता है, जैसे कि एक नियमित शैली कैसे बनाई जाती है।

उदाहरण के लिए, आइए किसी तत्व के पृष्ठभूमि रंग के लिए एक एनीमेशन परिभाषित करें:

इस मामले में, एनीमेशन को बैकग्राउंड कलरएनीमेशन कहा जाता है। एनीमेशन का कोई भी नाम हो सकता है.

यह एनीमेशन लाल पृष्ठभूमि रंग से नीले पृष्ठभूमि रंग में संक्रमण प्रदान करता है। इसके अलावा, एनीमेशन पूरा होने के बाद, div तत्व के लिए परिभाषित रंग सेट किया जाएगा।

किसी तत्व में एनीमेशन संलग्न करने के लिए, उसकी शैली में एनीमेशन-नाम गुण का उपयोग करें। इस संपत्ति का मूल्य लागू किए जाने वाले एनीमेशन का नाम है।

साथ ही, एनीमेशन-अवधि संपत्ति का उपयोग करके, आपको एनीमेशन समय को सेकंड या मिलीसेकंड में सेट करना होगा। इस स्थिति में, एनीमेशन का समय 2 सेकंड है।

इस परिभाषा के साथ, पेज लोड होने के तुरंत बाद एनीमेशन शुरू हो जाएगा। हालाँकि, आप उपयोगकर्ता की कार्रवाई के आधार पर एनीमेशन भी ट्रिगर कर सकते हैं। उदाहरण के लिए, :hover छद्म वर्ग के लिए एक शैली को परिभाषित करके, आप निर्दिष्ट कर सकते हैं कि जब माउस पॉइंटर किसी तत्व पर होवर करेगा तो एनीमेशन शुरू हो जाएगा:

@keyframes बैकग्राउंडकलरएनिमेशन (से (बैकग्राउंड-रंग: लाल; ) से (बैकग्राउंड-रंग: नीला; ) ) div(चौड़ाई: 100px; ऊंचाई: 100px; मार्जिन: 40px 30px; बॉर्डर: 1px सॉलिड #333; बैकग्राउंड-रंग: # ccc; ) div:hover(एनीमेशन-नाम: बैकग्राउंडकलरएनीमेशन; एनीमेशन-अवधि: 2s; )

बहुत सारे कुंजी फ़्रेम

जैसा कि ऊपर उल्लेख किया गया है, एनीमेशन, दो मानक कुंजी फ़्रेमों के अलावा, आपको कई मध्यवर्ती फ़्रेमों का उपयोग करने की अनुमति देता है। ट्वीन फ़्रेम निर्धारित करने के लिए, एनीमेशन का वह प्रतिशत लागू किया जाता है जिसमें ट्वीन फ़्रेम का उपयोग किया जाना चाहिए:

@keyframes बैकग्राउंडकलरएनिमेशन (से (बैकग्राउंड-रंग: लाल; ) 25%(बैकग्राउंड-रंग: पीला; ) 50%(बैकग्राउंड-रंग: हरा; ) 75%(बैकग्राउंड-रंग: नीला; ) से (बैकग्राउंड-रंग: बैंगनी ; ) )

इस मामले में, एनीमेशन लाल रंग से शुरू होता है। एनीमेशन समय के 25% के बाद, रंग पीला हो जाता है, 25% के बाद - हरा, और इसी तरह।

आप एक कुंजी फ़्रेम में एक साथ कई संपत्तियों को एनिमेट भी कर सकते हैं:

@keyframes बैकग्राउंडकलरएनिमेशन (से (बैकग्राउंड-रंग: लाल; अपारदर्शिता: 0.2; ) से (बैकग्राउंड-रंग: नीला; अपारदर्शिता: 0.9; ) )

आप कई अलग-अलग एनिमेशन भी परिभाषित कर सकते हैं, लेकिन उन्हें एक साथ लागू करें:

@keyframes बैकग्राउंडकलरएनिमेशन (से (बैकग्राउंड-रंग: लाल; ) से (बैकग्राउंड-रंग: नीला; ) ) @कीफ्रेम्स ओपेसिटीएनीमेशन (से (ओपेसिटी: 0.2; ) से (ओपेसिटी: 0.9; ) ) div(चौड़ाई: 100px; ऊंचाई: 100px; मार्जिन: 40px 30px; बॉर्डर: 1px ठोस #333; पृष्ठभूमि-रंग: #ccc; एनीमेशन-नाम: पृष्ठभूमिरंगएनीमेशन, अपारदर्शिताएनीमेशन; एनीमेशन-अवधि: 2s, 3s; )

एनीमेशन-नाम संपत्ति मान अल्पविराम द्वारा अलग किए गए एनिमेशन को सूचीबद्ध करता है, और एनीमेशन-अवधि संपत्ति अल्पविराम द्वारा अलग किए गए इन एनिमेशन का समय भी निर्धारित करती है। एनीमेशन का नाम और उसका समय स्थिति से मेल खाता है, यानी, opacityAnimation 3 सेकंड तक चलेगा।

एनिमेशन पूरा करना

सामान्य तौर पर, एनीमेशन-अवधि संपत्ति द्वारा निर्दिष्ट समय अंतराल पूरा हो जाने पर, एनीमेशन समाप्त हो जाता है। हालाँकि, अतिरिक्त गुणों के साथ हम इस व्यवहार को ओवरराइड कर सकते हैं।

इस प्रकार, एनीमेशन-पुनरावृत्ति-गणना गुण यह निर्धारित करता है कि एनीमेशन कितनी बार दोहराया जाएगा। उदाहरण के लिए, एनीमेशन की एक पंक्ति में 3 पुनरावृत्तियाँ:

एनिमेशन-पुनरावृत्ति-गणना: 3;

यदि आप चाहते हैं कि एनीमेशन अनंत बार चले, तो यह गुण अनंत पर सेट है:

एनीमेशन-पुनरावृत्ति-गिनती: अनंत;

दोहराए जाने पर, एनीमेशन शुरुआती कीफ़्रेम से फिर से शुरू हो जाएगा। लेकिन एनीमेशन-दिशा: वैकल्पिक; संपत्ति का उपयोग करना दोहराते समय एनीमेशन की विपरीत दिशा। यानी, यह अंतिम कीफ़्रेम से शुरू होगा और फिर शुरुआती फ़्रेम में परिवर्तित हो जाएगा:

एनिमेशन-नाम: बैकग्राउंड कलरएनिमेशन, ओपेसिटीएनिमेशन; एनीमेशन-अवधि: 2s, 2s; एनीमेशन-पुनरावृत्ति-गणना: 3; एनीमेशन-दिशा: वैकल्पिक;

जब एनीमेशन समाप्त हो जाता है, तो ब्राउज़र एनिमेटेड तत्व को उस शैली में सेट करता है जो एनीमेशन लागू होने से पहले होती। लेकिन एनीमेशन-फिल-मोड: फॉरवर्ड प्रॉपर्टी आपको एनिमेटेड प्रॉपर्टी का अंतिम मान ठीक उसी पर सेट करने की अनुमति देती है जो अंतिम फ्रेम में था:

एनिमेशन-नाम: बैकग्राउंड कलरएनिमेशन; एनीमेशन-अवधि: 2s; एनीमेशन-पुनरावृत्ति-गणना: 3; एनीमेशन-दिशा: वैकल्पिक; एनीमेशन-भरण-मोड: आगे;

एनिमेशन विलंब

एनीमेशन-विलंब संपत्ति का उपयोग करके आप एनीमेशन विलंब समय को परिभाषित कर सकते हैं:

एनिमेशन-नाम: बैकग्राउंड कलरएनिमेशन; एनीमेशन-अवधि: 5s; एनिमेशन-विलंब: 1s; /* देरी 1 सेकंड*/

स्मूथ एनिमेशन फ़ीचर

ट्रांज़िशन की तरह, आप एनिमेशन में समान स्मूथिंग फ़ंक्शंस लागू कर सकते हैं:

रैखिक: रैखिक चिकनाई फ़ंक्शन, संपत्ति समय के साथ समान रूप से बदलती है

सहजता: एक सहजता सुविधा जहां एनीमेशन मध्य की ओर तेज हो जाता है और अंत की ओर धीमा हो जाता है, जिससे अधिक प्राकृतिक विविधता मिलती है

ईज़-इन: एक ईज़-इन फ़ंक्शन जो केवल शुरुआत में ही तेज़ होता है

ईज़-आउट: एक ईज़-आउट फ़ंक्शन जो केवल शुरुआत में ही तेज़ होता है

ईज़-इन-आउट: एक ईज़-इन सुविधा जहां एनीमेशन मध्य की ओर गति करता है और अंत की ओर धीमा हो जाता है, जो अधिक प्राकृतिक विविधता प्रदान करता है

क्यूबिक-बेज़ियर: क्यूबिक बेज़ियर फ़ंक्शन का उपयोग एनीमेशन के लिए किया जाता है

स्मूथनेस फ़ंक्शन सेट करने के लिए, एनीमेशन-टाइमिंग-फ़ंक्शन प्रॉपर्टी का उपयोग करें:

@keyframes बैकग्राउंड कलरएनिमेशन (से (बैकग्राउंड-रंग: लाल; ) से (बैकग्राउंड-रंग: नीला; ) ) डिव (चौड़ाई: 100px; ऊंचाई: 100px; मार्जिन: 40px 30px; बॉर्डर: 1px सॉलिड #333; एनीमेशन-नाम: बैकग्राउंड कलरएनीमेशन ; एनीमेशन-अवधि: 3s; एनीमेशन-टाइमिंग-फ़ंक्शन: आसानी से अंदर-बाहर; )

एनीमेशन संपत्ति

एनीमेशन प्रॉपर्टी ऊपर चर्चा की गई प्रॉपर्टी को परिभाषित करने का एक संक्षिप्त तरीका है:

एनीमेशन: एनीमेशन-नाम एनीमेशन-अवधि एनीमेशन-समय-फ़ंक्शन एनीमेशन-पुनरावृत्ति-गिनती एनीमेशन-दिशा एनीमेशन-विलंब एनीमेशन-भरण-मोड

पहले दो पैरामीटर, जो एनीमेशन का नाम और समय प्रदान करते हैं, आवश्यक हैं। शेष मान वैकल्पिक हैं.

आइए गुणों का निम्नलिखित सेट लें:

एनिमेशन-नाम: बैकग्राउंड कलरएनिमेशन; एनीमेशन-अवधि: 5s; एनीमेशन-टाइमिंग-फ़ंक्शन: आसानी से अंदर-बाहर; एनीमेशन-पुनरावृत्ति-गणना: 3; एनीमेशन-दिशा: वैकल्पिक; एनिमेशन-विलंब: 1s; एनीमेशन-भरण-मोड: आगे;

यह सेट निम्नलिखित एनीमेशन परिभाषा के बराबर होगा:

एनिमेशन: बैकग्राउंडकलरएनिमेशन 5s आसानी से अंदर-बाहर 3 वैकल्पिक 1s आगे;

एनीमेशन के साथ एक बैनर बनाना

एनीमेशन के उदाहरण के तौर पर, आइए एक सरल एनिमेटेड बैनर बनाएं:

यहां तीन एनिमेशन एक साथ चलते हैं. "बैनर" एनीमेशन बैनर की पृष्ठभूमि का रंग बदलता है, और टेक्स्ट1 और टेक्स्ट2 एनिमेशन पारदर्शिता सेटिंग्स का उपयोग करके टेक्स्ट दिखाते और छिपाते हैं। जब पहला पाठ दृश्यमान होता है, तो दूसरा दृश्यमान नहीं होता है और इसके विपरीत भी। इस प्रकार, हमें बैनर में टेक्स्ट का एनीमेशन मिलता है।

CSS3 एनीमेशनसाइटों को गतिशीलता देता है. यह उपयोगकर्ता अनुभव को बेहतर बनाते हुए वेब पेजों को जीवंत बनाता है। CSS3 ट्रांज़िशन के विपरीत, एनीमेशन निर्माण कीफ़्रेम पर आधारित है, जो आपको किसी निश्चित समय के लिए प्रभावों को स्वचालित रूप से चलाने और दोहराने की अनुमति देता है, साथ ही एनीमेशन को एक लूप के भीतर रोकने की अनुमति देता है।

CSS3 एनीमेशन का उपयोग लगभग सभी html तत्वों के साथ-साथ: पहले और: के बाद छद्म तत्वों के लिए किया जा सकता है। एनिमेटेड संपत्तियों की सूची पृष्ठ पर दी गई है। एनिमेशन बनाते समय, संभावित प्रदर्शन समस्याओं के बारे में न भूलें, क्योंकि कुछ गुणों को बदलने के लिए बहुत सारे संसाधनों की आवश्यकता होती है।

सीएसएस एनीमेशन का परिचय

ब्राउज़र समर्थन

अर्थात: 10.0
फ़ायरफ़ॉक्स: 16.0, 5.0 -मोज़-
क्रोम: 43.0, 4.0 -वेबकिट-
सफारी: 4.0 -वेबकिट-
ओपेरा: 12.1, 12.0 -ओ-
आईओएस सफारी: 9, 7.1 -वेबकिट-
ऑपेरा मिनी: —
एंड्रॉइड ब्राउज़र: 44, 4.1 -वेबकिट-
एंड्रॉइड के लिए क्रोम: 44

1. मुख्य-फ़्रेम

एनीमेशन में विभिन्न बिंदुओं पर एनीमेशन संपत्ति मूल्यों को निर्दिष्ट करने के लिए कीफ़्रेम का उपयोग किया जाता है। कीफ़्रेम एक एनीमेशन चक्र के व्यवहार को परिभाषित करते हैं; एनीमेशन शून्य या अधिक बार दोहराया जा सकता है।

कीफ़्रेम को @keyframes नियम का उपयोग करके निर्दिष्ट किया जाता है, जिसे निम्नानुसार परिभाषित किया गया है:

@कीफ़्रेम्स एनीमेशन नाम (नियम सूची)

एनिमेशन निर्माण इंस्टालेशन से शुरू होता है कुंजी फ़्रेम@कीफ़्रेम नियम. फ़्रेम निर्धारित करते हैं कि कौन से गुण किस चरण में एनिमेटेड होंगे। प्रत्येक फ़्रेम में एक या अधिक संपत्ति और मूल्य जोड़े के एक या अधिक घोषणा ब्लॉक शामिल हो सकते हैं। @keyframes नियम में तत्व के एनीमेशन का नाम शामिल है, जो नियम और तत्व के घोषणा ब्लॉक को जोड़ता है।

@कीफ़्रेम छाया (से (पाठ-छाया: 0 0 3पीएक्स काला;) 50% (पाठ-छाया: 0 0 30पीएक्स काला;) से (पाठ-छाया: 0 0 3पीएक्स काला;))

कीफ़्रेम from और to कीवर्ड (0% और 100% के मान के बराबर) या प्रतिशत बिंदुओं का उपयोग करके बनाए जाते हैं, जिन्हें आप जितनी चाहें निर्दिष्ट कर सकते हैं। आप कीवर्ड और प्रतिशत अंक भी जोड़ सकते हैं। यदि फ़्रेम में समान गुण और मान हैं, तो उन्हें एक घोषणा में जोड़ा जा सकता है:

@कीफ़्रेम चलते हैं (से, (शीर्ष: 0; बाएँ: 0; ) 25%, 75% (शीर्ष: 100%;) 50% (शीर्ष: 50%;))

यदि 0% या 100% फ़्रेम निर्दिष्ट नहीं हैं, तो उपयोगकर्ता का ब्राउज़र एनिमेटेड संपत्ति के परिकलित (मूल रूप से सेट) मानों का उपयोग करके उन्हें बनाता है।

यदि एकाधिक @keyframes नियमों को एक ही नाम से परिभाषित किया गया है, तो दस्तावेज़ क्रम में अंतिम वाला सक्रिय हो जाएगा और पिछले सभी को अनदेखा कर दिया जाएगा।

एक बार @keyframes नियम घोषित हो जाने पर, हम इसे एनीमेशन प्रॉपर्टी में संदर्भित कर सकते हैं:

H1 (फ़ॉन्ट-आकार: 3.5em; रंग: डार्कमैजेंटा; एनीमेशन: छाया 2s अनंत आसानी से अंदर-बाहर;)

गैर-संख्यात्मक मानों (दुर्लभ अपवादों के साथ) को एनिमेट करने की अनुशंसा नहीं की जाती है, क्योंकि ब्राउज़र में परिणाम अप्रत्याशित हो सकता है। आपको उन प्रॉपर्टी मानों के लिए कीफ़्रेम भी नहीं बनाना चाहिए जिनमें मध्यबिंदु नहीं है, जैसे प्रॉपर्टी मान रंग: गुलाबी और रंग: #ffffff, चौड़ाई: ऑटो और चौड़ाई: 100px, या बॉर्डर-त्रिज्या: 0 और बॉर्डर- त्रिज्या: 50% (इस मामले में, सीमा-त्रिज्या निर्दिष्ट करना सही होगा: 0%)।

1.1. मुख्य फ़्रेमों के लिए समय फ़ंक्शन

एक कीफ़्रेम शैली नियम एक अस्थायी फ़ंक्शन भी घोषित कर सकता है जिसका उपयोग तब किया जाना चाहिए जब एनीमेशन अगले कीफ़्रेम पर जाता है।

उदाहरण

@कीफ्रेम बाउंस (से (शीर्ष: 100px; एनीमेशन-टाइमिंग-फ़ंक्शन: ईज़-आउट;) 25% (टॉप: 50px; एनीमेशन-टाइमिंग-फ़ंक्शन: ईज़-इन;) 50% (टॉप: 100px; एनीमेशन-टाइमिंग- फ़ंक्शन: ईज़-आउट; ) 75% (टॉप: 75px; एनिमेशन-टाइमिंग-फ़ंक्शन: ईज़-इन; ) से (टॉप: 100px; ))

"बाउंस" नामक एनीमेशन के लिए पांच कीफ़्रेम निर्दिष्ट हैं। पहले और दूसरे कीफ़्रेम के बीच (अर्थात 0% और 25% के बीच), ईज़िंग फ़ंक्शन का उपयोग किया जाता है। दूसरे और तीसरे कीफ़्रेम के बीच (अर्थात् 25% और 50% के बीच), सुचारू त्वरण फ़ंक्शन का उपयोग किया जाता है। और इसी तरह। तत्व पृष्ठ को 50px ऊपर ले जाएगा, अपने उच्चतम बिंदु तक पहुंचने पर धीमा हो जाएगा, और फिर 100px तक गिरने पर तेज़ हो जाएगा। एनीमेशन का दूसरा भाग समान व्यवहार करता है, लेकिन केवल तत्व को पृष्ठ से 25px ऊपर ले जाता है।

टू या 100% कीफ़्रेम में निर्दिष्ट समय फ़ंक्शन को अनदेखा कर दिया जाता है।

2. एनीमेशन नाम: एनीमेशन-नाम संपत्ति

एनीमेशन-नाम गुण तत्व पर लागू एनिमेशन की सूची निर्दिष्ट करता है। प्रत्येक नाम का उपयोग नियम में एक कीफ़्रेम का चयन करने के लिए किया जाता है जो एनीमेशन के लिए संपत्ति मान प्रदान करता है। यदि नाम नियम में किसी भी कीफ़्रेम से मेल नहीं खाता है, चेतन करने के लिए कोई गुण नहीं हैं, या कोई एनीमेशन नाम नहीं है, तो एनीमेशन निष्पादित नहीं होगा।

यदि एकाधिक एनिमेशन एक ही गुण को बदलने का प्रयास करते हैं, तो नामों की सूची के अंत के निकटतम एनीमेशन निष्पादित होगा।

एनीमेशन नाम केस संवेदी है और कोई भी कीवर्ड की अनुमति नहीं है। ऐसे नाम का उपयोग करने की अनुशंसा की जाती है जो एनीमेशन के सार को दर्शाता है, और आप हाइफ़न - या अंडरस्कोर वर्ण _ के साथ सूचीबद्ध एक या अधिक शब्दों का उपयोग कर सकते हैं।

संपत्ति विरासत में नहीं मिली है.

वाक्य - विन्यास

एनिमेशन-नाम: कोई नहीं; एनीमेशन-नाम: परीक्षण-01; एनीमेशन-नाम: -स्लाइडिंग; एनीमेशन-नाम: गतिशील-ऊर्ध्वाधर; एनीमेशन-नाम: test2; एनीमेशन-नाम: टेस्ट3, मूव4; एनीमेशन-नाम: प्रारंभिक; एनीमेशन-नाम: विरासत;

3. एनीमेशन अवधि: एनीमेशन-अवधि संपत्ति

एनीमेशन-अवधि संपत्ति एक एनीमेशन चक्र की अवधि निर्दिष्ट करती है। सेकंड एस या मिलीसेकंड एमएस में निर्दिष्ट। यदि किसी तत्व में एक से अधिक एनीमेशन निर्दिष्ट हैं, तो आप अल्पविराम द्वारा अलग किए गए मानों को सूचीबद्ध करके प्रत्येक के लिए एक अलग समय निर्धारित कर सकते हैं।

संपत्ति विरासत में नहीं मिली है.

वाक्य - विन्यास

एनिमेशन-अवधि: .5s; एनीमेशन-अवधि: 200ms; एनीमेशन-अवधि: 2s, 10s; एनीमेशन-अवधि: 15s, 30s, 200ms;

4. टाइमिंग फ़ंक्शन: एनीमेशन-टाइमिंग-फ़ंक्शन प्रॉपर्टी

एनीमेशन-टाइमिंग-फ़ंक्शन प्रॉपर्टी बताती है कि प्रत्येक जोड़ी कीफ़्रेम के बीच एनीमेशन कैसे आगे बढ़ेगा। एनीमेशन विलंब के दौरान, समय फ़ंक्शन लागू नहीं होते हैं।

संपत्ति विरासत में नहीं मिली है.

वाक्य - विन्यास

एनिमेशन-टाइमिंग-फ़ंक्शन: सहजता; एनीमेशन-टाइमिंग-फ़ंक्शन: आसानी से; एनीमेशन-टाइमिंग-फ़ंक्शन: आसानी से बाहर; एनीमेशन-टाइमिंग-फ़ंक्शन: आसानी से अंदर-बाहर; एनीमेशन-टाइमिंग-फ़ंक्शन: रैखिक; एनीमेशन-टाइमिंग-फंक्शन: स्टेप-स्टार्ट; एनीमेशन-टाइमिंग-फ़ंक्शन: चरण-अंत; एनीमेशन-टाइमिंग-फ़ंक्शन: क्यूबिक-बेज़ियर(0.1, 0.7, 1.0, 0.1); एनीमेशन-टाइमिंग-फ़ंक्शन: चरण(4, अंत); एनीमेशन-टाइमिंग-फ़ंक्शन: आसानी, स्टेप-स्टार्ट, क्यूबिक-बेज़ियर (0.1, 0.7, 1.0, 0.1); एनीमेशन-टाइमिंग-फ़ंक्शन: प्रारंभिक; एनिमेशन-टाइमिंग-फ़ंक्शन: इनहेरिट;

चरण-दर-चरण एनीमेशन का उपयोग दिलचस्प प्रभाव बनाने के लिए किया जा सकता है, जैसे कि टेक्स्ट मुद्रित होना या लोडिंग संकेतक।

5. एनीमेशन पुनरावृत्ति: एनीमेशन-पुनरावृत्ति-गणना संपत्ति

एनीमेशन-पुनरावृत्ति-गणना गुण एनीमेशन लूप को चलाने की संख्या निर्दिष्ट करता है। 1 के शुरुआती मान का मतलब है कि एनीमेशन एक बार शुरू से अंत तक चलेगा। इस संपत्ति का उपयोग अक्सर एनीमेशन-दिशा संपत्ति के वैकल्पिक मूल्य के संयोजन में किया जाता है, जो एनीमेशन को वैकल्पिक लूप में उल्टे क्रम में चलाने का कारण बनता है।

संपत्ति विरासत में नहीं मिली है.

वाक्य - विन्यास

एनीमेशन-पुनरावृत्ति-गिनती: अनंत; एनीमेशन-पुनरावृत्ति-गणना: 3; एनीमेशन-पुनरावृत्ति-गणना: 2.5; एनीमेशन-पुनरावृत्ति-गणना: 2, 0, अनंत;

6. एनीमेशन दिशा: एनीमेशन-दिशा संपत्ति

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

संपत्ति विरासत में नहीं मिली है.

यह निर्धारित करने के लिए कि एनीमेशन लूप रिपीट सम है या विषम, रिपीट की संख्या 1 से शुरू होती है।

वाक्य - विन्यास

एनिमेशन-दिशा: सामान्य; एनीमेशन-दिशा: उलटा; एनीमेशन-दिशा: वैकल्पिक; एनीमेशन-दिशा: वैकल्पिक-रिवर्स; एनीमेशन-दिशा: सामान्य, उल्टा; एनीमेशन-दिशा: वैकल्पिक, उलटा, सामान्य; एनीमेशन-दिशा: प्रारंभिक; एनीमेशन-दिशा: विरासत;

7. एनीमेशन चलाना: एनीमेशन-प्ले-स्टेट प्रॉपर्टी

एनीमेशन-प्ले-स्टेट प्रॉपर्टी यह निर्धारित करती है कि एनीमेशन शुरू होगा या रुकेगा। जावास्क्रिप्ट स्क्रिप्ट में इस प्रॉपर्टी का उपयोग करके लूप के भीतर एनीमेशन को रोकना संभव है। जब आप किसी ऑब्जेक्ट पर माउस घुमाते हैं तो आप एनीमेशन को रोक भी सकते हैं - state:hover ।

संपत्ति विरासत में नहीं मिली है.

वाक्य - विन्यास

एनीमेशन-प्ले-स्टेट: चल रहा है; एनीमेशन-प्ले-स्टेट: रुका हुआ; एनीमेशन-प्ले-स्टेट: रुका हुआ, चल रहा है, चल रहा है; एनीमेशन-प्ले-स्टेट: प्रारंभिक; एनीमेशन-प्ले-स्टेट: इनहेरिट;

8. एनीमेशन विलंब: एनीमेशन-विलंब संपत्ति

एनीमेशन-विलंब गुण यह निर्धारित करता है कि एनीमेशन कब शुरू होगा। सेकंड एस या मिलीसेकंड एमएस में निर्दिष्ट।

संपत्ति विरासत में नहीं मिली है.

वाक्य - विन्यास

एनिमेशन-विलंब: 5s; एनिमेशन-विलंब: 3s, 10ms;

9. एनीमेशन चलाने से पहले और बाद में तत्व की स्थिति: एनीमेशन-फिल-मोड संपत्ति

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

संपत्ति विरासत में नहीं मिली है.

वाक्य - विन्यास

एनिमेशन-भरण-मोड: कोई नहीं; एनीमेशन-भरण-मोड: आगे; एनीमेशन-फिल-मोड: पीछे की ओर; एनीमेशन-फिल-मोड: दोनों; एनीमेशन-फिल-मोड: कोई नहीं, पीछे की ओर; एनीमेशन-फिल-मोड: दोनों, आगे, कोई नहीं;

10. एनीमेशन का संक्षिप्त विवरण: एनीमेशन गुण

सभी एनीमेशन प्लेबैक मापदंडों को एक संपत्ति - एनीमेशन में जोड़ा जा सकता है, उन्हें एक स्थान से अलग करके सूचीबद्ध किया जा सकता है:
एनीमेशन: एनीमेशन-नाम एनीमेशन-अवधि एनीमेशन-समय-फ़ंक्शन एनीमेशन-विलंब एनीमेशन-पुनरावृत्ति-गिनती एनीमेशन-दिशा;

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

11. एकाधिक एनिमेशन

आप अल्पविराम द्वारा अलग किए गए नामों को सूचीबद्ध करके एक तत्व के लिए कई एनिमेशन सेट कर सकते हैं:

Div (एनीमेशन: छाया 1s आसानी से अंदर-बाहर 0.5s वैकल्पिक, 5s रैखिक 2s ले जाएँ;)

| 18.02.2016

CSS3 यूआई डिजाइनरों के लिए असीमित संभावनाएं खोलता है, और मुख्य लाभ यह है कि लगभग किसी भी विचार को आसानी से लागू किया जा सकता है और जावास्क्रिप्ट के उपयोग के बिना जीवन में लाया जा सकता है।

यह आश्चर्यजनक है कि कैसे साधारण चीजें एक साधारण वेब पेज को जीवंत बना सकती हैं और इसे उपयोगकर्ताओं के लिए अधिक सुलभ बना सकती हैं। हम CSS3 ट्रांज़िशन के बारे में बात कर रहे हैं, जिसके साथ आप किसी तत्व को रूपांतरित करने और शैली बदलने की अनुमति दे सकते हैं, उदाहरण के लिए, होवर पर। नीचे उपलब्ध नौ CSS3 एनीमेशन उदाहरण आपकी साइट पर एक प्रतिक्रियाशील अनुभव बनाने में मदद करेंगे, साथ ही सुंदर, सहज बदलाव के साथ पृष्ठ के समग्र स्वरूप को बेहतर बनाएंगे।

अधिक विस्तृत जानकारी के लिए, आप फ़ाइलों के साथ संग्रह डाउनलोड कर सकते हैं।

सभी प्रभाव संक्रमण गुण का उपयोग करके कार्य करते हैं। संक्रमण- "संक्रमण", "परिवर्तन") और छद्म-वर्ग: होवर, जो तत्व की शैली निर्धारित करता है जब माउस कर्सर उस पर घूमता है (हमारे ट्यूटोरियल में)। हमारे उदाहरणों के लिए, हमने 500x309 px div, #6d6d6d का प्रारंभिक पृष्ठभूमि रंग और 0.3 सेकंड की संक्रमण अवधि का उपयोग किया।

बॉडी> div (चौड़ाई: 500px; ऊँचाई: 309px; पृष्ठभूमि: #6d6d6d; -वेबकिट-संक्रमण: सभी 0.3s आसानी;; -moz-संक्रमण: सभी 0.3s आसानी;; -o-संक्रमण: सभी 0.3s आसानी;; संक्रमण: सभी 0.3 सहजता; )

1. होवर पर रंग बदलें

एक समय, कुछ आरजीबी मूल्यों की गणितीय गणना के साथ, इस तरह के प्रभाव को लागू करना काफी श्रमसाध्य काम था। अब यह एक सीएसएस शैली लिखने के लिए पर्याप्त है जिसमें आपको एक छद्म-वर्ग जोड़ने की आवश्यकता है: चयनकर्ता पर होवर करें और एक पृष्ठभूमि रंग सेट करें जो ब्लॉक पर होवर करने पर मूल पृष्ठभूमि रंग को आसानी से (0.3 सेकंड में) बदल देगा:

रंग: होवर (पृष्ठभूमि:#53ea93; )

2. फ्रेम की उपस्थिति

एक दिलचस्प और आकर्षक परिवर्तन आंतरिक फ्रेम है जो माउस घुमाने पर आसानी से दिखाई देता है। विभिन्न बटनों को सजाने के लिए उपयुक्त है। इस प्रभाव को प्राप्त करने के लिए, हम छद्म-वर्ग: होवर और इनसेट पैरामीटर के साथ बॉक्स-छाया संपत्ति का उपयोग करते हैं (तत्व के अंदर छाया सेट करता है)। इसके अलावा, आपको छाया खिंचाव (हमारे मामले में यह 23px है) और उसका रंग सेट करने की आवश्यकता होगी:

बॉर्डर: होवर (बॉक्स-छाया: इनसेट 0 0 0 23px #53ea93;)

3. झूला

यह सीएसएस एनीमेशन एक अपवाद है, क्योंकि यहां ट्रांज़िशन प्रॉपर्टी का उपयोग नहीं किया गया है। इसके बजाय हमने उपयोग किया:

• @keyframes फ़्रेम-दर-फ़्रेम CSS एनीमेशन बनाने के लिए एक मूल निर्देश है, जो आपको तथाकथित करने की अनुमति देता है। स्टोरीबोर्ड और मुख्य बिंदुओं की सूची के रूप में एनीमेशन का वर्णन करें;
• एनीमेशन और एनीमेशन-पुनरावृत्ति-गणना - एनीमेशन पैरामीटर (अवधि और गति) और चक्रों की संख्या (दोहराव) सेट करने के लिए गुण। हमारे मामले में, 1 दोहराएँ.

4. क्षीणन

फीका प्रभाव अनिवार्य रूप से किसी तत्व की पारदर्शिता में एक साधारण परिवर्तन है। एनीमेशन दो चरणों में बनाया गया है: सबसे पहले आपको प्रारंभिक पारदर्शिता स्थिति को 1 पर सेट करने की आवश्यकता है - अर्थात, पूर्ण अस्पष्टता, और फिर माउस को मँडराते समय इसका मान निर्दिष्ट करें - 0.6:

फीका (अस्पष्टता: 1;) .फीका: होवर (अस्पष्टता: 0.6;)

विपरीत परिणाम के लिए, मानों की अदला-बदली करें:

5. आवर्धन

होवर करने पर ब्लॉक को बड़ा बनाने के लिए, हम ट्रांसफॉर्म प्रॉपर्टी का उपयोग करेंगे और इसे स्केल (1.2) पर सेट करेंगे। इस मामले में, ब्लॉक अपने अनुपात को बनाए रखते हुए 20 प्रतिशत बढ़ जाएगा:

बढ़ो: होवर ( -वेबकिट-ट्रांसफॉर्म: स्केल (1.2); -एमएस-ट्रांसफॉर्म: स्केल (1.2); ट्रांसफॉर्म: स्केल (1.2); )

6. कमी

किसी तत्व को छोटा बनाना उतना ही आसान है जितना उसे बड़ा बनाना। यदि पांचवें बिंदु में पैमाने को बढ़ाने के लिए हमें 1 से अधिक मान निर्दिष्ट करने की आवश्यकता है, तो ब्लॉक को कम करने के लिए हम बस एक मान निर्दिष्ट करेंगे जो एक से कम होगा, उदाहरण के लिए, स्केल(0.7) । अब, माउस घुमाने पर, ब्लॉक आनुपातिक रूप से अपने मूल आकार के 30 प्रतिशत तक सिकुड़ जाएगा:

श्रिंक: होवर ( -वेबकिट-ट्रांसफॉर्म: स्केल (0.7); -एमएस-ट्रांसफॉर्म: स्केल (0.7); ट्रांसफॉर्म: स्केल (0.7); )

7. एक वृत्त में परिवर्तन

आमतौर पर उपयोग किए जाने वाले एनिमेशन में से एक आयताकार तत्व है जो ऊपर ले जाने पर एक वृत्त में बदल जाता है। सीएसएस बॉर्डर-रेडियस प्रॉपर्टी का उपयोग करते हुए, :hover और ट्रांज़िशन के साथ संयोजन में उपयोग किया जाता है, इसे बिना किसी समस्या के प्राप्त किया जा सकता है:

वृत्त: होवर (सीमा-त्रिज्या: 70%; )

8. घूर्णन

एक मज़ेदार एनीमेशन विकल्प किसी तत्व को एक निश्चित संख्या में डिग्री तक घुमाना है। ऐसा करने के लिए, हमें फिर से ट्रांसफॉर्म प्रॉपर्टी की आवश्यकता होगी, लेकिन एक अलग मूल्य के साथ - रोटेटजेड (20 डिग्री) । इन मापदंडों के साथ, ब्लॉक को Z अक्ष के सापेक्ष 20 डिग्री दक्षिणावर्त घुमाया जाएगा:

घुमाएँ: होवर ( -वेबकिट-ट्रांसफॉर्म: रोटेटजेड (20डिग्री); -एमएस-ट्रांसफॉर्म: रोटेटजेड (20डिग्री); ट्रांसफॉर्म: रोटेटजेड (20डिग्री); )

9. 3डी छाया

यह प्रभाव फ्लैट डिजाइन में उपयुक्त है या नहीं, इस पर डिजाइनरों की राय अलग-अलग है। हालाँकि, यह CSS3 एनीमेशन काफी मौलिक है और इसका उपयोग वेब पेजों पर भी किया जाता है। हम पहले से ही परिचित बॉक्स-छाया गुणों का उपयोग करके त्रि-आयामी प्रभाव प्राप्त करेंगे (एक बहु-परत छाया बनाएंगे) और ट्रांसलेशनएक्स (-7px) पैरामीटर के साथ बदल देंगे (7 पिक्सेल द्वारा बाईं ओर ब्लॉक की क्षैतिज शिफ्ट सुनिश्चित करेंगे) ):

थ्रीड: होवर (बॉक्स-शैडो: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -वेबकिट-ट्रांसफॉर्म : अनुवादएक्स( -7px); परिवर्तन: TranslateX(-7px); )

ब्राउज़र समर्थन

निम्नलिखित ब्राउज़र वर्तमान में ट्रांज़िशन प्रॉपर्टी का समर्थन करते हैं:

इन उदाहरणों में प्रयुक्त शेष गुण, जैसे ट्रांसफ़ॉर्म, बॉक्स-शैडो, आदि भी लगभग सभी आधुनिक ब्राउज़रों द्वारा समर्थित हैं। हालाँकि, यदि आप अपनी परियोजनाओं के लिए इन विचारों का उपयोग करने जा रहे हैं, तो हम दृढ़ता से अनुशंसा करते हैं कि आप क्रॉस-ब्राउज़र संगतता की दोबारा जाँच करें।

हमें आशा है कि आपको ये CSS3 एनीमेशन उदाहरण उपयोगी लगे होंगे। हम आपकी रचनात्मक सफलता की कामना करते हैं!

इस संग्रह में सर्वोत्तम और उच्चतम गुणवत्ता वाली सीएसएस सुविधाएँ शामिल हैं। यहां आप प्रसिद्ध लेआउट डिजाइनरों और डिजाइनरों के विभिन्न और अद्भुत डेमो उदाहरण और तकनीकें पा सकते हैं जो यह साबित करने की कोशिश कर रहे हैं कि अब केवल शुद्ध सीएसएस का उपयोग करके लगभग सब कुछ करना संभव है। आप यहां कई पाठ भी पा सकते हैं जो आपको विस्तार से बताते हैं कि ऐसी रचना कैसे बनाई जाए। मुझे आशा है कि यह संग्रह आपके लिए उपयोगी होगा।

सीएसएस 3डी बादल

इस डेमो में आप 3डी में फैंसी क्लाउड बनाने और संपादित करने में सक्षम होंगे। ये सीएसएस क्लाउड हमें यह स्पष्ट करते हैं कि वेब प्रौद्योगिकियों की संभावनाएं लगभग असीमित हैं।

शुद्ध सीएसएस लोगो

ये केवल शुद्ध सीएसएस से बने लोगो के उदाहरण हैं। जरा इसके बारे में सोचें, इसके निर्माण में किसी भी छवि का उपयोग नहीं किया गया था। यह बस कुछ है.

सीएसएस एनिमेशन के साथ वर्णमाला

वर्णमाला में सीएसएस का उपयोग करने का महान और कलात्मक उदाहरण

साइट के लिए 3डी नेविगेशन

साइट के लिए एक सरल लेकिन बहुत स्टाइलिश नेविगेशन बार, निश्चित रूप से केवल CSS3 का उपयोग करके बनाया गया है। कोई चित्र या स्क्रिप्ट नहीं.

सीएसएस के साथ गूगल डूडल

Google सर्च इंजन के कई डूडल में से एक, जो CSS में बनाया गया है। यह CSS एनीमेशन के अच्छे उपयोग का एक बेहतरीन उदाहरण है।

स्लाइडर

एक अच्छी तरह से बनाया गया और उच्च गुणवत्ता वाला छवि स्लाइडर। साथ ही डेमो में 4 उदाहरण।

डबल एनिमेटेड रिंग

बहुत अधिक सीएसएस कोड के साथ एक सुंदर एनिमेटेड और बहुरंगी अंगूठी

सीएसएस में धुंधला

मुझे ऐसा लगता है कि यह फ़िल्टर बहुत आवश्यक है, खासकर जब से यह शुद्ध सीएसएस का उपयोग करके बनाया गया है। ब्लर का उपयोग करके आप उपयोगकर्ता का ध्यान एक निश्चित बिंदु पर आकर्षित कर सकते हैं।

फ्लेक्सबॉक्स के लिए संपूर्ण मार्गदर्शिका

यह आलेख प्रतिक्रियाशील फ्लेक्सबॉक्स ब्लॉक के बारे में है। यह इन ब्लॉकों के बारे में पूरी तरह से बात करता है, हालांकि लेख अंग्रेजी में है।

CSS3 का उपयोग करके रंगीन और एनिमेटेड मेनू

आइकन वाली वेबसाइट के लिए एक सुंदर ड्रॉप-डाउन मेनू। एक बड़ा प्लस यह है कि यह पूरी तरह से सीएसएस में बनाया गया है।

सीएसएस फ़िल्टर

अंग्रेजी में उच्च गुणवत्ता वाली सामग्री, जो छवियों पर सीएसएस फिल्टर का उपयोग करने के बारे में बात करती है।

सीएसएस प्रपत्र

अनेक उदाहरणों के साथ सीएसएस फॉर्म के बारे में एक पोस्ट

सीएसएस में प्रगति पट्टियाँ

शुद्ध सीएसएस और एनीमेशन का उपयोग करके स्टाइलिश प्रगति पट्टियाँ कैसे बनाएं, इस पर एक पाठ। आप उदाहरण भी देख सकते हैं और स्रोत डाउनलोड कर सकते हैं।

एनिमेशन - Animate.css

आज इंटरनेट पर सबसे लोकप्रिय सीएसएस एनिमेशन प्रोजेक्ट। और शायद सबसे सरल और उच्चतम गुणवत्ता, और मुफ़्त भी।

). CSS3 हमें एक और अधिक शक्तिशाली एनीमेशन टूल प्रदान करता है जो केवल एक संक्रमण से परे जाता है और हमें बनाने की अनुमति देता है ऐसे संक्रमणों की असीमित संख्या.

दूसरे शब्दों में, एनीमेशन हमें आगे बढ़ने की अनुमति देता है एकराज्य (संपत्तियों का सेट) को दूसरा, से दूसराको तीसरा, और यदि आवश्यक हो तो ट्रांज़िशन की संख्या पूरी होने पर एनीमेशन को उल्टे क्रम में चलाएं।

संक्रमण प्रभावों के समान, किसी एनीमेशन को चलाने के लिए, आपको इसके प्लेबैक को ट्रिगर करना होगा, चाहे वह तब हो जब पृष्ठ पहली बार लोड हो, या जब कोई तत्व फोकस प्राप्त करता है, जब माउस पॉइंटर किसी तत्व पर घूमता है, और इसी तरह।

एनीमेशन बनाने के चरण

आइए देखें कि सीएसएस में एनीमेशन बनाने की प्रक्रिया में क्या शामिल है। सबसे पहले, आपको एनीमेशन के मुख्य फ़्रेम को परिभाषित करने की आवश्यकता है। कुंजी फ़्रेम क्या है? एक तत्व की कल्पना करें जो ब्राउज़र विंडो के बाईं ओर स्थित है और आपको इसे विंडो के मध्य में एनिमेट करने और इसे अपनी मूल स्थिति में वापस करने की आवश्यकता है। इस एनीमेशन के लिए हमें तीन कीफ़्रेम की आवश्यकता है:

• पहला- तत्व की प्रारंभिक स्थिति को परिभाषित करता है।
• दूसरा- तत्व को विंडो के मध्य में ले जाने के बाद तत्व की स्थिति निर्धारित करता है।
• तीसरा- एनीमेशन के अंतिम बिंदु (तत्व की प्रारंभिक स्थिति) को परिभाषित करता है।

एक बार आवश्यक कीफ़्रेम परिभाषित हो जाने के बाद, यह उपयोगकर्ता के ब्राउज़र पर निर्भर होगा कि वह उन सभी मध्यवर्ती चरणों को तैयार करे जिन्हें हमने कीफ़्रेम का उपयोग करके परिभाषित किया है। अर्थात्, इन अंतरालों में तत्व को चित्रित करने का कार्य पूरी तरह से ब्राउज़र पर है; हमारी ओर से, हमें केवल इन एनीमेशन बिंदुओं को निर्दिष्ट करने की आवश्यकता है, या दूसरे शब्दों में, हमें ब्राउज़र को यह बताना होगा कि इसे एक शैली से दूसरी शैली में कैसे बदलना चाहिए मुख्य फ़्रेमों के बीच.

अगला कदम उस तत्व या तत्व को एनीमेशन निर्दिष्ट करना है जिसमें हम रुचि रखते हैं। इस मामले में, प्रत्येक तत्व के लिए अलग-अलग एनीमेशन सेटिंग्स निर्दिष्ट करना संभव है।

बाद में इस लेख में, हम विस्तार से देखेंगे कि एनीमेशन विलंब कैसे सेट करें, एनीमेशन चक्रों की संख्या कैसे सेट करें, इसकी अवधि कैसे निर्धारित करें, इसकी गति और दिशा इंगित करें, वर्तमान क्षण में एनीमेशन की स्थिति और यहां तक ​​​​कि निर्धारित भी करें। उस समय किसी तत्व की शैली जब एनीमेशन नहीं चल रहा हो।

इससे पहले कि हम एनिमेशन बनाने के लिए आगे बढ़ें, मैं आपका ध्यान ब्राउज़र में एनीमेशन गुणों के लिए वर्तमान समर्थन की ओर आकर्षित करना चाहूंगा:

मुख्य फ़्रेमों को परिभाषित करना

हमारे उदाहरण का परिणाम:

निम्नलिखित उदाहरण पर विचार करें जिसमें हम कई अलग-अलग एनिमेशन बनाएंगे और उन्हें एक तत्व को सौंपेंगे।

इस उदाहरण में, हमने कई एनिमेशन बनाए जिनमें तत्व की चौड़ाई धीरे-धीरे बढ़ती है, पृष्ठभूमि का रंग बदलता है, और तत्व अपनी धुरी के सापेक्ष नकारात्मक रूप से झुकता है एक्स(क्षैतिज अक्ष) एनीमेशन के मध्य में और तत्व एनीमेशन के अंत की ओर तत्व के मूल आकार में सिकुड़ जाता है, जो पृष्ठभूमि रंग में बदलाव और अक्ष के साथ तत्व के झुकाव के साथ होता है एक्सउलटा।

हमारे उदाहरण का परिणाम:

एनिमेशन चक्रों की संख्या

डिफ़ॉल्ट रूप से, CSS में कोई भी एनीमेशन चलेगा बस एक बार. एनीमेशन-पुनरावृत्ति-गणना संपत्ति के लिए धन्यवाद, हम यह निर्दिष्ट करने में सक्षम होंगे कि एनीमेशन लूप कितनी बार चलाया जाएगा, यह मनमाने ढंग से कई बार हो सकता है, या हम संकेत कर सकते हैं कि एनीमेशन अनिश्चित काल तक चलेगा, कुछ मामलों में यह बहुत उपयोगी है.

कृपया ध्यान दें कि नकारात्मक मान वर्जित हैंवस्तुनिष्ठ कारणों से, लेकिन इसे गैर-पूर्णांक मान निर्दिष्ट करने की अनुमति है, इस स्थिति में एनीमेशन चक्र का केवल एक भाग चलाया जाएगा - निर्दिष्ट मान के अनुपात में (उदाहरण के लिए, मान 1.5 एनीमेशन चक्र को डेढ़ बार चलाने के अनुरूप है)।

निम्नलिखित उदाहरण पर विचार करें:

इस उदाहरण में, हमने एक सरल एनीमेशन बनाया है जिसमें हम तत्व के पृष्ठभूमि रंग को बदलते हुए, वर्तमान स्थिति के शीर्ष किनारे के सापेक्ष स्थित तत्वों को स्थानांतरित करने के लिए शीर्ष सीएसएस संपत्ति का उपयोग करते हैं।