). CSS3 हमें एक और अधिक शक्तिशाली एनीमेशन टूल प्रदान करता है जो केवल एक संक्रमण से परे जाता है और हमें बनाने की अनुमति देता है ऐसे संक्रमणों की असीमित संख्या.
दूसरे शब्दों में, एनीमेशन हमें आगे बढ़ने की अनुमति देता है एकराज्य (संपत्तियों का सेट) को दूसरा, से दूसराको तीसरा, और यदि आवश्यक हो तो ट्रांज़िशन की संख्या पूरी होने पर एनीमेशन को उल्टे क्रम में चलाएं।
संक्रमण प्रभावों के समान, किसी एनीमेशन को चलाने के लिए, आपको इसके प्लेबैक को ट्रिगर करना होगा, चाहे वह तब हो जब पृष्ठ पहली बार लोड हो, या जब कोई तत्व फोकस प्राप्त करता है, जब माउस पॉइंटर किसी तत्व पर घूमता है, और इसी तरह।
एनीमेशन बनाने के चरण
आइए देखें कि सीएसएस में एनीमेशन बनाने की प्रक्रिया में क्या शामिल है। सबसे पहले, आपको एनीमेशन के मुख्य फ़्रेम को परिभाषित करने की आवश्यकता है। कुंजी फ़्रेम क्या है? एक तत्व की कल्पना करें जो ब्राउज़र विंडो के बाईं ओर स्थित है और आपको इसे विंडो के मध्य में एनिमेट करने और इसे अपनी मूल स्थिति में वापस करने की आवश्यकता है। इस एनीमेशन के लिए हमें तीन कीफ़्रेम की आवश्यकता है:
- पहला- तत्व की प्रारंभिक स्थिति को परिभाषित करता है।
- दूसरा- तत्व को विंडो के मध्य में ले जाने के बाद तत्व की स्थिति निर्धारित करता है।
- तीसरा- एनीमेशन के अंतिम बिंदु (तत्व की प्रारंभिक स्थिति) को परिभाषित करता है।
एक बार आवश्यक कीफ़्रेम परिभाषित हो जाने के बाद, यह उपयोगकर्ता के ब्राउज़र पर निर्भर होगा कि वह उन सभी मध्यवर्ती चरणों को तैयार करे जिन्हें हमने कीफ़्रेम का उपयोग करके परिभाषित किया है। अर्थात्, इन अंतरालों में तत्व को चित्रित करने का कार्य केवल हमारी ओर से ब्राउज़र का है, हमें केवल इन एनीमेशन बिंदुओं को निर्दिष्ट करने की आवश्यकता है, या दूसरे शब्दों में, हमें ब्राउज़र को यह बताना होगा कि इसे एक शैली से दूसरी शैली में कैसे बदलना चाहिए; मुख्य फ़्रेमों के बीच.
अगला कदम उस तत्व या तत्व को एनीमेशन निर्दिष्ट करना है जिसमें हम रुचि रखते हैं। इस मामले में, प्रत्येक तत्व के लिए अलग-अलग एनीमेशन सेटिंग्स निर्दिष्ट करना संभव है।
बाद में इस लेख में, हम विस्तार से देखेंगे कि एनीमेशन विलंब कैसे सेट करें, एनीमेशन चक्रों की संख्या कैसे सेट करें, इसकी अवधि कैसे निर्धारित करें, इसकी गति और दिशा इंगित करें, वर्तमान क्षण में एनीमेशन की स्थिति और यहां तक कि निर्धारित भी करें। उस समय किसी तत्व की शैली जब एनीमेशन नहीं चल रहा हो।
इससे पहले कि हम एनिमेशन बनाने के लिए आगे बढ़ें, मैं आपका ध्यान ब्राउज़र में एनीमेशन गुणों के लिए वर्तमान समर्थन की ओर आकर्षित करना चाहूंगा:
ओपेरा | आईएक्सप्लोरर | किनारा |
|||
|---|---|---|---|---|---|
| 43.0 4.0 -वेबकिट- | 16.0 5.0 -मोज़- | 30.0 15.0 -वेबकिट- | 9.0 4.0 -वेबकिट- | 10.0 | 12.0 |
मुख्य फ़्रेमों को परिभाषित करना
हमारे उदाहरण का परिणाम:
निम्नलिखित उदाहरण पर विचार करें जिसमें हम कई अलग-अलग एनिमेशन बनाएंगे और उन्हें एक तत्व को सौंपेंगे।
इस उदाहरण में, हमने कई एनिमेशन बनाए जिनमें तत्व की चौड़ाई धीरे-धीरे बढ़ती है, पृष्ठभूमि का रंग बदलता है, और तत्व अपनी धुरी के सापेक्ष नकारात्मक रूप से झुकता है एक्स(क्षैतिज अक्ष) एनीमेशन के मध्य में और तत्व एनीमेशन के अंत की ओर तत्व के मूल आकार में सिकुड़ जाता है, जो पृष्ठभूमि रंग में बदलाव और अक्ष के साथ तत्व के झुकाव के साथ होता है एक्सउलटा।
हमारे उदाहरण का परिणाम:
एनिमेशन चक्रों की संख्या
डिफ़ॉल्ट रूप से, CSS में कोई भी एनीमेशन चलेगा बस एक बार. एनीमेशन-पुनरावृत्ति-गणना संपत्ति के लिए धन्यवाद, हम यह निर्दिष्ट करने में सक्षम होंगे कि एनीमेशन लूप कितनी बार चलाया जाएगा, यह मनमाने ढंग से कई बार हो सकता है, या हम संकेत कर सकते हैं कि एनीमेशन अनिश्चित काल तक चलेगा, कुछ मामलों में यह बहुत उपयोगी है.
कृपया ध्यान दें कि इंगित करना वर्जित है नकारात्मक मान वस्तुनिष्ठ कारणों से, लेकिन इसे गैर-पूर्णांक मान निर्दिष्ट करने की अनुमति है, इस स्थिति में एनीमेशन चक्र का केवल एक भाग चलाया जाएगा - निर्दिष्ट मान के अनुपात में (उदाहरण के लिए, मान 1.5 एनीमेशन चक्र को डेढ़ बार चलाने के अनुरूप है)।
निम्नलिखित उदाहरण पर विचार करें:
इस उदाहरण में हमने बनाया है सरल एनीमेशन, जिसमें साथ सीएसएस का उपयोग करनाशीर्ष गुण तत्व के पृष्ठभूमि रंग को बदलते हुए, वर्तमान स्थिति के शीर्ष किनारे के सापेक्ष सापेक्ष स्थिति के साथ तत्वों को स्थानांतरित करते हैं।
नमस्कार मित्रों! आज हम एक बहुत ही दिलचस्प विषय पर गौर करेंगे - एक वास्तविक उदाहरण का उपयोग करके सीएसएस एनिमेशन बनाना। इस पाठ की परिणति सृजन होगी सुंदर सीएसएसमिलियन डॉलर लोगो एनीमेशन।
ठंडा
हकलाना
पाठ सामग्री
- स्रोतः डाउनलोड करें
- पाठ से मूल उदाहरण: https://codepen.io/agragregra/pen/PKNavm
- पाठ से प्रारंभिक टेम्पलेट: https://github.com/agragregra/optimizedhtml-start-template
थोड़ा सिद्धांत
इससे पहले कि आप एक एनिमेटेड उदाहरण बनाना शुरू करें, आपको बुनियादी बातों पर ध्यान देना चाहिए सीएसएस एनिमेशन, बुनियादी शर्तों, गुणों और नियमों पर विचार करें सीएसएस निर्माणएनिमेशन.
यदि आपके पास किसी भी एप्लिकेशन में एनिमेशन बनाने का कोई अनुभव है, जैसे कि एडोब आफ्टर इफेक्ट्स या एजिंग फ्लैश प्रोफेशनल (अब एडोब एनिमेट), तो आपको "की फ्रेम", "टाइमिंग फ़ंक्शन या मोशन डायनामिक्स" जैसी अवधारणाओं से परिचित होना चाहिए। जो, एनीमेशन के किसी भी अन्य क्षेत्र की तरह, सीएसएस का उपयोग करके पृष्ठ पर तत्वों के एनीमेशन पर भी लागू होते हैं। हालाँकि, एप्लिकेशन इंटरफ़ेस के साथ काम करने के विपरीत, आप एक संपादक में कोड लिखकर अपने सीएसएस एनिमेशन बनाते हैं।
सीएसएस नियम @कीफ्रेम
सीएसएस एनीमेशन बनाना एक ब्लॉक में एनीमेशन का नाम घोषित करने से शुरू होता है @कीफ़्रेम्सऔर तथाकथित एनीमेशन चरणों या मुख्य फ़्रेमों को परिभाषित करना।
सिद्धांत और बुनियादी बातों की समीक्षा करने के लिए, हम शुद्ध सीएसएस का उपयोग करेंगे, और बाद में, अधिक जटिल उदाहरण का उपयोग करके, हम सैस प्रीप्रोसेसर का उपयोग करेंगे। आप पाठ में सैस के बारे में अधिक जान सकते हैं। इसके अलावा, सीएसएस की बुनियादी बातों की गहरी समझ के लिए, मैं "सीएसएस मूल बातें - छोटे बच्चों के लिए एक गाइड" और "एक पाठ में सभी सीएसएस चयनकर्ता" पाठ पढ़ने की भी सलाह देता हूं।
आइए @keyframes संरचना और उस पर keyframes के साथ काम करने को देखें सरल उदाहरण:
@कीफ्रेम टर्निंग ( 0% ( बॉर्डर-रेडियस: 0 0 0 0; ट्रांसफॉर्म: रोटेट (0डिग्री); ) 25% ( बॉर्डर-रेडियस: 50% 0 0 0; ट्रांसफॉर्म: रोटेट (45डिग्री); ) 50% ( बॉर्डर- त्रिज्या: 50% 50% 0 0; परिवर्तन: घुमाएँ (90 डिग्री); 75% (सीमा-त्रिज्या: 50% 50% 50% 0; परिवर्तन: घुमाएँ (135 डिग्री); ) 100% (सीमा-त्रिज्या: 50% 50 % 50% 50%; परिवर्तन: घुमाएँ(180डिग्री);
पहली पंक्ति में हम देखते हैं कि कीवर्ड @keyframes के बाद इसका नाम "टर्निंग" है। यह फ़्रेमफ़्रेम के ब्लॉक का नाम है, जिसका उल्लेख हम आगे करेंगे।
घोषणा के बाद, एक घुंघराले ब्रेस खुलता है (इस उदाहरण में, चालू)। शुद्ध सीएसएस), जिसमें प्रत्येक कुंजी फ़्रेम के लिए गुण क्रमिक रूप से 0% से 100% तक लिखे जाते हैं। कृपया ध्यान दें कि 0% और 100% के बीच आप जितने चाहें उतने मध्यवर्ती मान डाल सकते हैं, चाहे वह 50%, 75% या 83% भी हो। यह एक एनीमेशन एप्लिकेशन की टाइमलाइन के समान है, जहां आप दो राज्यों के बीच कोई भी मध्यवर्ती स्थिति जोड़ सकते हैं।
कीफ़्रेम वाले कोड के इस ब्लॉक को फिर किसी पर भी लागू किया जा सकता है सीएसएस चयनकर्ता, लेकिन अक्सर वे एक विशिष्ट चयनकर्ता के लिए तैयार होते हैं, यदि हम वांछित ब्लॉक से एक निश्चित व्यवहार प्राप्त करना चाहते हैं।
मुख्य फ़्रेमों के एक ब्लॉक तक पहुँचना
ऑब्जेक्ट के लिए कुंजी फ़्रेम सेट करने के बाद (वास्तविक जीवन में यह समानांतर में किया जाता है या कुंजी फ़्रेम के साथ ब्लॉक तक पहुंचने के बाद भी), हम अपने नए बनाए गए ब्लॉक तक पहुंच सकते हैं। आइए उपरोक्त उदाहरण से निम्नलिखित सरल कोड को देखें:
Div (चौड़ाई: 120px; ऊंचाई: 120px; पृष्ठभूमि-रंग: बैंगनी; मार्जिन: 100px; एनीमेशन: 2s को आसानी से बाहर निकालना 1s अनंत वैकल्पिक;)
आखिरी पंक्ति तक कुछ खास नहीं. यहां हम यह निर्धारित करते हैं कि ऑब्जेक्ट शुरू में कैसा दिखेगा और ब्लॉक की अंतिम पंक्ति में हम कुंजी फ़्रेम के ब्लॉक को संदर्भित करते हैं जिसे "टर्निंग" कहा जाता है:
एनिमेशन: टर्निंग 2एस ईज़ी-आउट 1एस अनंत वैकल्पिक;
यदि कुंजी फ़्रेम की परिभाषा के साथ सब कुछ अपेक्षाकृत स्पष्ट है, तो इस पंक्ति को तत्काल स्पष्टीकरण की आवश्यकता है। जैसा कि हम देखते हैं, सबसे पहले आता है सीएसएस संपत्ति"एनीमेशन"। यह एक शॉर्टहैंड फॉर्म है, जैसे कि संपत्ति "मार्जिन: 20px 30px 40px 50px", जिसे कई अलग-अलग गुणों में विभाजित किया जा सकता है:
इस सादृश्य से, समग्र गुण "एनीमेशन" को कई अलग-अलग गुणों में विभाजित किया जा सकता है:
| एनीमेशन-नाम | एनीमेशन का नाम जिसे @keyframes से एक्सेस किया जाता है |
| एनीमेशन-अवधि | अवधि या सीएसएस एनीमेशन का निष्पादन कितने समय तक चलता है। सेकंड या मिलीसेकंड (एमएस) में निर्दिष्ट किया जा सकता है |
| एनीमेशन-टाइमिंग-फ़ंक्शन | अस्थायी कार्य, वस्तु की गति की गतिशीलता या संपत्ति में परिवर्तन ( आसानी- (डिफ़ॉल्ट रूप से) एनीमेशन धीरे-धीरे शुरू होता है, तेज़ होता है और धीरे-धीरे समाप्त होता है; रेखीय- एनीमेशन समान रूप से होता है; आराम से- धीरे-धीरे शुरू होता है और अंतिम कुंजी फ्रेम की ओर गति बढ़ाता है; आराम करो- तेजी से शुरू होता है और अंत में आसानी से धीमा हो जाता है; आसानी से अंदर-बाहर- धीरे-धीरे शुरू होता है और धीरे-धीरे समाप्त होता है) |
| एनीमेशन-विलंब | प्रारंभ से पहले एनिमेशन विलंब समय. सेकंड या मिलीसेकंड में भी निर्दिष्ट किया गया है |
| एनीमेशन-पुनरावृत्ति-गिनती | एनीमेशन के दोहराव (पुनरावृत्तियों) की संख्या ( अनंत- अनंत, या आप इकाइयों के बिना एक साधारण संख्या निर्दिष्ट कर सकते हैं) |
| एनीमेशन-दिशा | एनिमेशन दिशा, अनुक्रमिक, उल्टा या आगे-पीछे ( सामान्य- (डिफ़ॉल्ट रूप से) एनीमेशन शुरू से अंत तक चलता है और रुक जाता है; वैकल्पिक- शुरू से अंत तक और विपरीत दिशा में खेलता है; वैकल्पिक-रिवर्स- अंत से आरंभ और पीछे तक खेलता है; रिवर्स- एनीमेशन अंत से चलाया जाता है।) |
| एनीमेशन-प्ले-स्टेट | एनीमेशन प्लेबैक को नियंत्रित करना ( रोके गए(विराम), दौड़ना(प्रक्षेपण), आदि)। यदि आवश्यक हो तो होवर पर या जेएस फ़ंक्शन से लागू किया जा सकता है |
| एनीमेशन-भरण-मोड | एनीमेशन चलने से पहले और बाद में तत्व की स्थिति। उदाहरण के लिए, मान पीछे की ओरआपको सभी संपत्तियों को वापस करने की अनुमति देता है मूल अवस्थाएनीमेशन लागू करने के तुरंत बाद |
अक्सर, अनुभवी डेवलपर्स इन सभी गुणों को अलग-अलग नहीं लिखते हैं, बल्कि एक संक्षिप्त नोटेशन का उपयोग करते हैं और इसकी संरचना इस प्रकार है:
एनीमेशन: (1. एनीमेशन-नाम - नाम) (2. एनीमेशन-अवधि - अवधि) (3. एनीमेशन-टाइमिंग-फ़ंक्शन गति की गतिशीलता) (4. एनीमेशन-विलंब - प्रारंभ से पहले रुकें) (5. एनीमेशन-पुनरावृत्ति- गिनती - निष्पादन की संख्या) (6. एनीमेशन-दिशा - दिशा)
एनिमेशन: एनीमेशननाम 2एस रैखिक 1एस अनंत रिवर्स
उदाहरण से हम देखते हैं कि हम @keyframes एनीमेशननाम ब्लॉक तक पहुंचते हैं, एनीमेशन की अवधि 2 सेकंड पर सेट करते हैं, गतिशीलता रैखिक होती है, शुरू होने से पहले विराम 1 सेकंड होता है, एनीमेशन को अंतहीन रूप से दोहराया जाता है और विपरीत दिशा में निष्पादित किया जाता है।
जैसा कि मैंने पहले कहा, संक्षिप्त नोटेशन संपत्ति से शुरू होता है " एनिमेशन", इसके बाद मान आते हैं, जिनके अनुक्रम को न भूलना बेहतर है, ताकि सीएसएस एनीमेशन लिखते समय कोई भ्रम न हो।
हालाँकि, इनमें से अधिकांश गुणों को छोड़ा जा सकता है, क्योंकि अक्सर उनके डिफ़ॉल्ट मान अधिकांश एनीमेशन निर्माण कार्यों को पूरी तरह से संतुष्ट करेंगे। हो सकता है कि उनमें से कुछ न लिखा गया हो, लेकिन बाकी को उसी क्रम में दर्शाया जाना चाहिए जिसकी हमने पहले चर्चा की थी। सामान्य तौर पर, आपके एनीमेशन को कार्य करने के लिए, आपको अपनी समग्र संपत्ति में केवल दो पैरामीटर की आवश्यकता होती है - नाम ( एनीमेशन-नाम) और अवधि ( एनीमेशन-अवधि).
हम काम शुरू करने वाले इंटरफ़ेस के जितना करीब आते हैं, उपयोगकर्ता के लिए यह उतना ही अधिक समझ में आता है। जीवन में, लगभग कुछ भी तुरंत नहीं होता है - सोडा का एक कैन खोलते समय या बिस्तर पर जाने से पहले अपनी आँखें बंद करते समय, हम मध्यवर्ती अवस्थाओं का एक समूह देखते हैं, न कि एक तेज "खुला/बंद", जैसा कि वेब पर होता है।
अपने लेख में मैं सीएसएस एनीमेशन और इसके साथ काम करने के तरीके के बारे में अपना ज्ञान साझा करूंगा। एनिमेशन वेबसाइटों को गतिशीलता देता है और उनकी क्षमताओं की समझ में सुधार करता है। यह वेब पेजों को जीवंत बनाता है और उपयोगकर्ता से बातचीत में मदद करता है। CSS3 ट्रांज़िशन के विपरीत, CSS एनिमेशन कीफ़्रेम पर आधारित होते हैं। जो आपको एक निर्दिष्ट समय के लिए प्रभावों को चलाने और दोहराने की अनुमति देता है, साथ ही लूप के भीतर एनीमेशन को स्वचालित रूप से रोकने की अनुमति देता है।
एनीमेशन सीएसएस में संग्रहीत कीफ़्रेम या कीफ़्रेम का एक सेट है:
@कीफ़्रेम एनीमेशन-परीक्षण (0% (चौड़ाई: 100px;) 100% (चौड़ाई: 200px;))
आइए देखें कि यहां क्या हो रहा है। @keyframes कीवर्ड एनीमेशन को ही दर्शाता है। फिर एनीमेशन का नाम आता है, हमारे मामले में एनीमेशन-टेस्ट। घुंघराले ब्रेसिज़ में कीफ़्रेम की एक सूची होती है। हम 0% के शुरुआती फ़्रेम और 100% के अंतिम फ़्रेम का उपयोग करते हैं (इन्हें से और से के रूप में भी लिखा जा सकता है)।
नीचे दिए गए कोड पर एक नज़र डालें। एनिमेशन को इस प्रकार भी सेट किया जा सकता है:
@कीफ़्रेम एनीमेशन-परीक्षण (से (चौड़ाई: 0; ) 25% (चौड़ाई: 75px; ) 75% (चौड़ाई: 150px; ) से (चौड़ाई: 100%; ) )
याद रखें, यदि प्रारंभ या अंत फ़्रेम निर्दिष्ट नहीं है, तो ब्राउज़र स्वचालित रूप से उनका पता लगा लेगा जैसे कि उन पर कोई एनीमेशन लागू नहीं किया गया था।
आप एनीमेशन को इस तरह किसी तत्व से जोड़ सकते हैं:
तत्व-चयनकर्ता (एनीमेशन-नाम: आपका-एनीमेशन-नाम; एनीमेशन-अवधि: 2.5s;)
एनीमेशन-नाम संपत्ति @keyframes एनीमेशन के लिए नाम निर्दिष्ट करती है। एनीमेशन-अवधि नियम एनीमेशन की अवधि को सेकंड (1s, 30s, .5s) या मिलीसेकंड (600ms, 2500ms) में निर्दिष्ट करता है।
आप मुख्यफ़्रेमों का समूह भी बना सकते हैं:
@कीफ़्रेम एनीमेशन-परीक्षण (0%, 35% (चौड़ाई: 50px; ) 75% (चौड़ाई: 200px; ) 100% (चौड़ाई: 100%; ) )
आप एक तत्व (चयनकर्ता) पर कई एनिमेशन लागू कर सकते हैं। उनके नाम और पैरामीटर आवेदन के क्रम में लिखे जाने चाहिए:
तत्व-चयनकर्ता (एनीमेशन-नाम: एनिम-नाम-1, एनिम-नाम-2; एनिमेशन-अवधि: 1एस, 3एस;)
एनिमेशन विलंब:
एनीमेशन-विलंब संपत्ति एनीमेशन चलने से पहले सेकंड या मिलीसेकंड में देरी को निर्दिष्ट करती है:
तत्व-चयनकर्ता (एनीमेशन-नाम: एनिम-नाम-1; एनीमेशन-अवधि: 3एस; एनीमेशन-विलंब: 2एस; /* एनीमेशन शुरू होने से पहले 2 सेकंड बीत जाएंगे */)
पुनः चलाएँ एनीमेशन:
एनीमेशन-इटरेशन-काउंट का उपयोग करके हम निर्दिष्ट कर सकते हैं कि एनीमेशन कितनी बार दोहराया जाएगा: 0, 1, 2, 3, आदि। या लूपिंग के लिए अनंत:
तत्व-चयनकर्ता (एनीमेशन-नाम: एनीमेशन-नाम-1; एनीमेशन-अवधि: 3एस; एनीमेशन-विलंब: 4एस; एनीमेशन-पुनरावृत्ति-गणना: 5; /* एनीमेशन 5 बार चलता है */)
एनीमेशन से पहले और बाद में तत्व स्थिति:
एनीमेशन-फिल-मोड प्रॉपर्टी का उपयोग करके, यह निर्दिष्ट करना संभव है कि एनीमेशन शुरू होने से पहले और समाप्त होने के बाद तत्व किस स्थिति में होगा:
एनीमेशन-भरण-मोड: आगे;- एनीमेशन तत्व पूरा होने/प्लेबैक के बाद अंतिम कीफ़्रेम की स्थिति में होगा;
ए निमेशन-फिल-मोड: पीछे की ओर;- तत्व पहले कीफ़्रेम की स्थिति में होगा;
एनीमेशन-फिल-मोड: दोनों; - एनीमेशन शुरू होने से पहले, तत्व पहले कीफ़्रेम की स्थिति में होगा, पूरा होने के बाद - अंतिम कीफ़्रेम की स्थिति में।
एनीमेशन प्रारंभ और बंद करें:
यह एनीमेशन-प्ले-स्टेट प्रॉपर्टी की ज़िम्मेदारी है, जो दो मान ले सकती है: चल रहा है या रुका हुआ है।
तत्व-चयनकर्ता: होवर (एनीमेशन-प्ले-स्टेट: रोका गया;)
एनिमेशन दिशा:
एनीमेशन-दिशा गुण निर्दिष्ट करता है कि एनीमेशन चलने की दिशा को कैसे नियंत्रित किया जाए। यहां संभावित मान हैं:
एनीमेशन-दिशा: सामान्य; - एनीमेशन सीधे क्रम में चलाया जाता है;
एनीमेशन-दिशा: उलटा; - एनीमेशन को उल्टे क्रम में चलाया जाता है, से से से तक;
एनीमेशन-दिशा: वैकल्पिक;- यहां तक कि एनीमेशन दोहराव उल्टे क्रम में खेले जाते हैं, विषम वाले - आगे के क्रम में;
एनीमेशन-दिशा: वैकल्पिक-रिवर्स; - विषम एनिमेशन दोहराव उल्टे क्रम में चलाए जाते हैं, सम एनीमेशन दोहराव आगे के क्रम में चलाए जाते हैं।
एनिमेटेड फ्रेम के सुचारू आउटपुट का कार्य:
एनीमेशन-टाइमिंग-फ़ंक्शन प्रॉपर्टी आपको एनीमेशन प्लेबैक गति के लिए जिम्मेदार एक विशेष फ़ंक्शन सेट करने की अनुमति देती है। डिफ़ॉल्ट रूप से, एनीमेशन धीमी गति से शुरू होता है, तेजी से बढ़ता है और अंत में धीमा हो जाता है। वर्तमान में हमारे पास निम्नलिखित पूर्वनिर्धारित मान हैं: रैखिक, सहजता, सहजता से अंदर, आसानी से बाहर, आसानी से बाहर, चरण-प्रारंभ, चरण-अंत।
हालाँकि, आप ऐसे फ़ंक्शन स्वयं बना सकते हैं। अर्थ एनीमेशन-टाइमिंग-फ़ंक्शन: क्यूबिक-बेज़ियर (P1x, P1y, P2x, P2y); इनपुट के रूप में 4 तर्क लेता है और एनीमेशन प्रक्रिया के लिए एक वितरण वक्र बनाता है।
आप अधिक विस्तार से अध्ययन कर सकते हैं या वेबसाइट पर इन कार्यों के निर्माण का प्रयास कर सकते हैं http://cubic-bezier.com
अंत में, चरण फ़ंक्शन का उपयोग करके एनीमेशन को व्यक्तिगत मानों (चरणों) के एक सेट में विभाजित किया जा सकता है, जो इनपुट के रूप में चरणों की संख्या और दिशा (प्रारंभ या अंत) लेता है। नीचे दिए गए उदाहरण में, एनीमेशन में 5 चरण होते हैं, जिनमें से अंतिम चरण एनीमेशन के अंत से ठीक पहले होगा:
तत्व-चयनकर्ता (एनीमेशन-नाम: एनिम-नाम-1; एनीमेशन-अवधि: 3एस; एनीमेशन-विलंब: 5एस; एनीमेशन-पुनरावृत्ति-गणना: 3; एनीमेशन-समय-फ़ंक्शन: चरण(5, अंत); )
एनिमेशन के लिए ब्राउज़र समर्थन:
तालिका में मान पहले ब्राउज़र संस्करण को दर्शाते हैं जो संपत्ति का पूरी तरह से समर्थन करता है।
-webkit-, -moz- या -O- वाले मान पहले संस्करण को दर्शाते हैं जो उपसर्ग के साथ काम करता है।
वेबसाइट https://www.w3schools.com पर आप सीएसएस एनीमेशन का अधिक विस्तार से अध्ययन कर सकते हैं (उदाहरण के साथ)।
एनिमेशन के साथ काम करने के लिए लोकप्रिय पुस्तकालयों में से एक हैचेतन.सीएसएस.
ऐसा लग सकता है कि सीएसएस एनिमेशन के साथ काम करते समय आपके सामने आने वाली कठिनाइयाँ उचित नहीं हैं। लेकिन ये बिल्कुल सच नहीं है.
सबसे पहले, सीएसएस किसी इंटरफ़ेस के उपयोगकर्ता अनुभव को बेहतर बनाने के लिए एक शक्तिशाली उपकरण है। यह उपयोगकर्ता उत्पादकता को बहुत अधिक प्रभावित नहीं करता है. जावास्क्रिप्ट एनालॉग्स के विपरीत। प्रौद्योगिकी, GPU की कंप्यूटिंग शक्ति का उपयोग करके, ब्राउज़रों को रेंडरिंग तत्वों की गति को शीघ्रता से अनुकूलित करने की अनुमति देती है।
दूसरे, लचीलापन, गति और सरलता सीएसएस कार्यान्वयनएनिमेशन मौजूदा या नए इंटरफ़ेस में "जीवन साँस लेने" में मदद करेंगे। सामान्य और मूल दृष्टिकोण विकसित करने और प्रौद्योगिकी की बारीकियों को समझने के बाद, आप लगभग सभी परियोजनाओं के लिए अद्वितीय प्रयोज्य इंटरफेस बना सकते हैं।
मुझे आशा है कि आपको लेख में मिल गया होगा उपयोगी जानकारीअपने आप के लिए। सभी के लिए सुंदर साइटें। एनिमेशन के बारे में मत भूलना :)
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पीएक्स काला;))
कीफ्रेम का उपयोग करके बनाया जाता है कीवर्डसे और तक (मानों 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.25,0.1,0.25,1) के अनुरूप है। |
| आराम से | एनीमेशन धीरे-धीरे शुरू होता है और फिर अंत में सुचारू रूप से गति पकड़ता है। क्यूबिक-बेज़ियर(0.42,0,1,1) के अनुरूप है। |
| आराम करो | एनीमेशन तेजी से शुरू होता है और अंत में आसानी से धीमा हो जाता है। क्यूबिक-बेज़ियर(0,0,0.58,1) के अनुरूप है। |
| आसानी से अंदर-बाहर | एनीमेशन धीरे-धीरे शुरू होता है और धीरे-धीरे समाप्त होता है। क्यूबिक-बेज़ियर(0.42,0,0.58,1) के अनुरूप है। |
| क्यूबिक-बेज़ियर(X1, y1, x2, y2) | आपको मैन्युअल रूप से 0 से 1 तक मान सेट करने की अनुमति देता है। आप एनीमेशन परिवर्तन की गति का कोई भी प्रक्षेपवक्र बना सकते हैं। |
| चरण कार्य | |
| चरण-शुरुआत | चरण-दर-चरण एनीमेशन सेट करता है, एनीमेशन को खंडों में तोड़कर प्रत्येक चरण की शुरुआत में परिवर्तन होता है; चरण(1, प्रारंभ) में मूल्यांकन किया गया। |
| चरण-अंत | चरण-दर-चरण एनीमेशन, प्रत्येक चरण के अंत में परिवर्तन होते हैं। चरण(1, अंत) में मूल्यांकन किया गया। |
| चरण (चरणों की संख्या, चरण स्थिति) | एक स्टेप टाइम फ़ंक्शन जो दो पैरामीटर लेता है। पहला पैरामीटर फ़ंक्शन में अंतरालों की संख्या निर्दिष्ट करता है। यह 0 से बड़ा एक धनात्मक पूर्णांक होना चाहिए, जब तक कि दूसरा तर्क जंप-नॉन न हो, उस स्थिति में यह 1 से बड़ा एक धनात्मक पूर्णांक होना चाहिए। दूसरा पैरामीटर, जो वैकल्पिक है, चरण स्थिति निर्दिष्ट करता है - वह बिंदु जिस पर एनीमेशन निम्न मानों में से किसी एक का उपयोग करके शुरू होता है:
वैल्यू स्टार्ट के साथ एनीमेशन प्रत्येक चरण की शुरुआत में शुरू होता है, वैल्यू प्रत्येक चरण के अंत में देरी से समाप्त होती है। विलंबता की गणना एनीमेशन समय को चरणों की संख्या से विभाजित करके की जाती है। यदि दूसरा पैरामीटर निर्दिष्ट नहीं है, तो डिफ़ॉल्ट मान अंत का उपयोग किया जाता है। |
| प्रारंभिक | |
| इनहेरिट | |
वाक्य - विन्यास
एनिमेशन-टाइमिंग-फ़ंक्शन: सहजता; एनीमेशन-टाइमिंग-फ़ंक्शन: आसानी से; एनीमेशन-टाइमिंग-फ़ंक्शन: आसानी से बाहर; एनीमेशन-टाइमिंग-फ़ंक्शन: आसानी से अंदर-बाहर; एनीमेशन-टाइमिंग-फ़ंक्शन: रैखिक; एनीमेशन-टाइमिंग-फंक्शन: स्टेप-स्टार्ट; एनीमेशन-टाइमिंग-फ़ंक्शन: चरण-अंत; एनीमेशन-टाइमिंग-फंक्शन: क्यूबिक-बेज़ियर(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 ले जाएँ;)
आप एनीमेशन की अवधि, पुनरावृत्ति, दिशा, गति प्रकार और चरणों को नियंत्रित कर सकते हैं। आप छद्म तत्वों सहित किसी भी तत्व को चेतन कर सकते हैं।
एक शर्त विशिष्ट मूल्यों की उपस्थिति है। ऑटो पर सेट गुण एनिमेटेड नहीं हैं।
सफ़ारी वर्तमान में छद्म तत्व एनिमेशन का समर्थन नहीं करता है, कृपया प्रविष्टि देखने के लिए अन्य ब्राउज़र का उपयोग करें।
सीएसएस एनीमेशन उदाहरण:
उदाहरण एनीमेशन कोड:
@कीफ्रेम चाल (40% (बाएं: 50%; निचला: 75%; एनीमेशन-टाइमिंग-फ़ंक्शन: आसानी से अंदर;) 80% (बाएं: 90%; निचला: -10एम;))
कनेक्टिंग एनीमेशन:
सूर्य (एनिमेशन: 15s अनंत रैखिक चाल;)
चाल - एनीमेशन नाम 15s - अवधि अनंत - अंतहीन दोहराव रैखिक - गति प्रकार
@कीफ़्रेम्स
एनीमेशन स्वयं @keyframes ब्लॉक के अंदर सेट है। @keyframes के बाद एनीमेशन का नाम सेट किया गया है, और फिर अंदर घुंघराले ब्रेसिज़- उसके कदम.
चरणों को प्रतिशत का उपयोग करके या से और कीवर्ड का उपयोग करके निर्दिष्ट किया जा सकता है। इस स्थिति में, आप एनीमेशन के प्रकार को चरणों में बदल सकते हैं (एनीमेशन-टाइमिंग-फ़ंक्शन):
एनीमेशन-नाम
एनीमेशन का नाम सेट करने के लिए उपयोग किया जाता है।
संभावित मान: एक या अधिक एनीमेशन नाम. डिफ़ॉल्ट मान: कोई नहीं.
एनीमेशन-नाम: चाल; - एक एनीमेशन. एनीमेशन-नाम: चाल, सूर्य-रंग; - दो एनिमेशन, अल्पविराम से अलग किए गए नाम।
एनीमेशन-अवधि
एनीमेशन की अवधि एनीमेशन-अवधि संपत्ति द्वारा नियंत्रित की जाती है।
संभावित मान: सेकंड (सेकंड) या मिलीसेकंड (एमएस) में समय। कई एनिमेशन के मामले में, उनमें से प्रत्येक के लिए समय को अल्पविराम से अलग करके निर्दिष्ट किया जा सकता है। प्रारंभिक मान 0s है.
एनिमेशन-टाइमिंग-फ़ंक्शन
गुण एनीमेशन प्रकार को परिभाषित करता है।
संभावित मान:
सहज एनिमेशनआसानी - फिसलन (डिफ़ॉल्ट मान) रैखिक - चिकनी गति आसानी से अंदर - अंत की ओर त्वरण आसानी से बाहर - शुरुआत में त्वरण आसानी से अंदर बाहर - आसानी से चिकनी फिसलन
क्यूबिक-बेज़ियर (संख्या, संख्या, संख्या, संख्या) आपको एक जटिल एनीमेशन प्रकार निर्दिष्ट करने की अनुमति देता है। क्यूबिक-बेज़ियर.कॉम पर मानों का चयन करना सुविधाजनक है।
क्यूबिक-बेज़ियर(.24,1.49,.29,-0.48);
चरण-दर-चरण एनीमेशनचरण-प्रारंभ और चरण-अंत - आपको चरण-दर-चरण एनीमेशन सेट करने की अनुमति देता है, विशिष्ट चरण सेट करना सुनिश्चित करें। इस मामले में, चरण-प्रारंभ के साथ चरण की शुरुआत में परिवर्तन होते हैं, और चरण-अंत के साथ - अंत में।
चरण-अंत यदि आप स्टेप-स्टार्ट सेट करते हैं, तो काउंटर एक से शुरू होगा।
चरण(संख्या) - आपको उन चरणों की संख्या निर्धारित करने की अनुमति देता है जिनमें एनीमेशन निष्पादित किया जाएगा, जबकि आप मध्यवर्ती चरण निर्दिष्ट करने की आवश्यकता के बिना केवल अंतिम चरण निर्धारित कर सकते हैं।
एनीमेशन-पुनरावृत्ति-गिनती
एनीमेशन की पुनरावृत्ति को नियंत्रित करता है। डिफ़ॉल्ट मान: 1 (एनीमेशन एक बार चलता है)।
संभावित मान:
संख्या - एनीमेशन को कितनी बार चलाना है। अनंत - अनंत पुनरावृत्ति.
एनीमेशन-दिशा
एनिमेशन के निर्देशन के लिए जिम्मेदार.
संभावित मान:
सामान्य - एनीमेशन शुरू से अंत तक सामान्य दिशा में चलता है। रिवर्स - एनीमेशन विपरीत दिशा में, यानी अंत से चलाया जाता है। वैकल्पिक - एनीमेशन शुरू से अंत तक और फिर विपरीत दिशा में चलाया जाता है। वैकल्पिक-रिवर्स - एनीमेशन अंत से शुरुआत तक और फिर विपरीत दिशा में चलाया जाता है।
एनीमेशन-प्ले-स्टेट
एनीमेशन को रोकने और चलाने को नियंत्रित करता है।
संभावित मान: चल रहा है - एनीमेशन चलाया जाता है (डिफ़ॉल्ट मान)। रुका हुआ - एनीमेशन पहले चरण पर रुक जाता है।
उस चरण को नियंत्रित करना संभव नहीं है जहां स्टॉप होगा, लेकिन आप एनीमेशन को इसके द्वारा रोक सकते हैं: होवर:
एनिमेशन-विलंब
एनीमेशन-विलंब के साथ आप एनीमेशन के चलने से पहले उसके लिए विलंब निर्धारित कर सकते हैं।
संभावित मान: सेकंड (सेकंड) या मिलीसेकंड (एमएस) में समय। मान नकारात्मक हो सकते हैं. कई एनिमेशन के मामले में, उनमें से प्रत्येक के लिए समय को अल्पविराम से अलग करके निर्दिष्ट किया जा सकता है। प्रारंभिक मान 0s है.
एनीमेशन-भरण-मोड
संपत्ति यह निर्धारित करती है कि एनीमेशन, एनीमेशन के प्लेबैक समय के बाहर तत्व को प्रभावित करेगा या नहीं।
संभावित मान:
कोई नहीं - एनीमेशन केवल प्लेबैक के दौरान तत्व को प्रभावित करता है, पूरा होने पर तत्व अपनी मूल स्थिति में वापस आ जाता है; आगे - प्लेबैक समाप्त होने के बाद एनीमेशन तत्व को प्रभावित करता है। पीछे की ओर - प्लेबैक शुरू होने से पहले एनीमेशन तत्व को प्रभावित करता है। दोनों - एनीमेशन प्लेबैक समाप्त होने से पहले और बाद में तत्व को प्रभावित करता है।
यह देखने के लिए कि एनीमेशन चलना शुरू होने से पहले कैसे पीछे की ओर और दोनों काम करते हैं, एनीमेशन-देरी सेट करें: 3s; . उदाहरण को एक नई विंडो में खोलना भी समझ में आता है।
इन सभी गुणों को प्रयोग करके लिखा जा सकता है छोटा लेख, उदाहरण के लिए:
एनिमेशन: समय 5s अनंत वैकल्पिक;
आवश्यक मान एनीमेशन नाम और अवधि हैं। पहली बार मान को प्लेबैक अवधि माना जाता है, दूसरा - विलंब।
