सीएसएस एनिमेशन सीखने के लिए उपयोगी लिंक

हमने 2011 में CSS3 के एनीमेशन और इसके बारे में लेखों पर बहुत सारे प्रयोगों का अवलोकन करना शुरू किया, लेकिन तब इस एनीमेशन का समर्थन वेबकाइट के ब्राउज़र तक सीमित था। 2011 के मध्य में, फ़ायरफ़ॉक्स 5 को भी यह समर्थन मिला, और हम इंटरनेट एक्सप्लोरर (10) के अगले पुनर्जन्म में इसकी उम्मीद कर सकते हैं, इसलिए अब @keyframes (फ्रेम-बाय-फ़्रेम एनीमेशन) के सिंटैक्स को समझने का सही समय है। यह पोस्ट 10 लेखों का एक संक्षिप्त अवलोकन प्रदान करता है जो बताते हैं कि इस शांत CSS3 संपत्ति का उपयोग कैसे करें, उदाहरण और डेमो के साथ।

सीएसएस एनिमेशन (CSS3 एनिमेशन)

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

कीफ़्रेम एनिमेशन सिंटैक्स

यदि आप पहले से ही CSS3 के एनीमेशन से परिचित हैं और आपको बस एक त्वरित धोखा पत्र की आवश्यकता है, तो आपको निश्चित रूप से क्रिस कॉयर की सीएसएस-ट्रिक्स वेबसाइट पर संबंधित पृष्ठ की जांच करनी चाहिए। इस पर आपको कोड के कई उदाहरण मिल सकते हैं जिन्हें आसानी से कॉपी करके अपनी स्टाइलशीट में पेस्ट किया जा सकता है।

CSS3 के एनिमेशन

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

CSS एनिमेशन: सिद्धांत और उदाहरण

स्मैशिंग मैगज़ीन पर यह गहन लेख CSS3 के एनिमेशन पर केंद्रित है, जो अधिक यथार्थवादी भ्रम पैदा करने में मदद करने के लिए पारंपरिक एनीमेशन सिद्धांतों जैसे स्क्वैश और खिंचाव का उपयोग करता है।

सीएसएस एनीमेशन मास्टरक्लास (सीएसएस एनीमेशन में एक मास्टरक्लास)

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

CSS3 एनिमेशन के साथ प्रयोग करना शुरू करें

ली मुनरो 2010 में अपने सर्वश्रेष्ठ प्रदर्शन पर थे जब उन्होंने अपने ब्लॉक में CSS3 के एनीमेशन पर एक लेख प्रकाशित किया था। उनका उदाहरण एक वेबकिट के विक्रेता उपसर्गों पर केंद्रित था, लेकिन सिंटैक्स स्वयं अपरिवर्तित रहा। वह इंटरनेट से उदाहरणों का हवाला देकर अपने लेख को समाप्त करता है।

सीएसएस कीफ़्रेम एनिमेशन के साथ रिंगिंग बेल

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

सीएसएस एनिमेशन के साथ मज़ा आ रहा है

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

सीएसएस एनिमेशन के लिए पांच-मिनट गाइड

इस संग्रह में कलमकारी लेख यूबेली का है , जिसने एक्सप्लोरर 10 में सीएसएस एनीमेशन समर्थन के लिए पाठकों को पेश किया और शब्दावली की मूल बातें के पांच मिनट के अवलोकन की पेशकश की।

सीएसएस एनीमेशन: यह आपको लगता है कि आसान है (सीएसएस के साथ एनीमेशन: यह आपको लगता है की तुलना में आसान है)

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