CSS3 एनीमेशन @keyframes को सुव्यवस्थित करना

Question

कुछ महीने पहले मैंने एनिमेटेड CSS3 एटी-एटी http://www.ruawebdesign.com/css3-at-at बनाया था। मैंने इसे मुख्य रूप से एक सीखने के प्रयोग के रूप में बनाया और यह देखने के लिए कि नई CSS3 सुविधाओं का उपयोग करके क्या संभव था। अधिकांश चीजों की तरह हम निर्माण करते हैं, मैंने इसे नेट पर छोड़ दिया। मैं उस साइट पर बड़ी मात्रा में यातायात की अपेक्षा नहीं कर रहा था। मैंने सोचा कि शायद दोस्तों और काम के सहयोगियों के कुछ विचार हो सकते हैं लेकिन यह अभी भी दुनिया भर से एक हफ्ते में कुछ सौ विचारों को बढ़ाता है।

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

इससे पहले कि कोई भी जावास्क्रिप्ट/jquery विकल्प सुझाता है, याद रखें कि मैंने इसे CSS3 की क्षमताओं का परीक्षण करने के लिए बनाया है।

अग्रिम धन्यवाद।

Answer 1

अच्छा काम। आपने एनीमेशन के लिए CSS3 की क्षमता पर अपनी आंखें खोली हैं।

मैं सवाल आप दुर्भाग्य से पूछा उत्तर नहीं दे सकता है, लेकिन मैं एक एनिमेटर होने के लिए प्रशिक्षण कर रहा हूँ ताकि मैं तुम्हें अपने एनीमेशन बेहतर बनाने में मदद करने के लिए कुछ सुझाव कर सकते हैं:

1. लिफ्ट एक समय में दो पैरों: फ्रंट एक ही समय में बाएं और पीछे दाएं, फिर एक ही समय में दाएं और पीछे बाईं ओर जाएं। वे संतुलन के लिए पैर का विरोध करना चाहिए।

2. जो पैर उठाए नहीं गए हैं उन्हें जमीन पर लगाया जाना चाहिए, लेकिन इस तथ्य को अनुकरण करने के लिए दृश्य में पीछे की ओर बढ़ना चाहिए कि शरीर उनकी स्थिति के सापेक्ष आगे बढ़ रहा है।

3. चूंकि जमीन पर पैर पिछड़े स्लाइडिंग कर रहे हैं, इसलिए शरीर स्वाभाविक रूप से कम हो जाएगा।

4. यदि आप और भी यथार्थवाद जोड़ना चाहते हैं तो उठाए गए पैर जमीन पर फिर से पहुंचने के तुरंत बाद शरीर को थोड़ा और नीचे जाने दें। यह ऐसा लगता है कि वजन उन पैरों पर स्थानांतरित हो रहा है।