WAIT के साथ ठहराव और पाश सीएसएस एनिमेशन! चेतन

शुद्ध सीएसएस एनीमेशन के साथ आप बहुत कुछ कर सकते हैं, लेकिन एक एनीमेशन को रोकना और रोकना संभव नहीं है वर्तमान W3 कल्पना के साथ.

लेकिन जैसे फ्री टूल के साथ रुकिए! चेतन आप वास्तव में कर सकते हैं खरोंच से पाले हुए एनिमेशन बनाएं साथ में कस्टम देरी प्रत्येक लूप के बीच। यह एक सांसारिक कार्य की तरह लग सकता है लेकिन यह कई डेवलपर्स के लिए एक दर्द बिंदु हल करता है.

यह ध्यान दिया जाना चाहिए कि एक सीएसएस संपत्ति कहा जाता है एनीमेशन-विलंब कौन कौन से देरी करता है शुरु एक सीएसएस एनीमेशन का. हालांकि यह एक दोहराए जाने वाले एनीमेशन को प्रभावित नहीं करता है क्योंकि यह केवल शुरुआती बिंदु को विलंबित करता है.

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

यह वेब ऐप कर सकते हैं किसी भी CSS3 एनीमेशन सुविधा के साथ काम करें, घुमाव और परिवर्तनों सहित। आप कोई नया CSS गुण नहीं लिख रहे हैं बल्कि keyframes सुविधा के शीर्ष पर निर्माण बनाना प्रतिशत के आधार पर रोक (0% से 100% तक) एनीमेशन के अंदर.

देखने के लिए होम पेज देखें कार्रवाई में कुछ उदाहरण हैं. यह बहुत स्पष्ट है कि आप क्या कर सकते हैं और स्रोत कोड अपने काम में कॉपी / पेस्ट करने के लिए सही है.

कृपया ध्यान दें कि यह है पूरी तरह से पुस्तकालय नहीं है. यह एक जनरेटर है कि मक्खी पर अपना सीएसएस कोड बनाता है एनीमेशन देरी के लिए आपको जो कुछ भी चाहिए, उसके आधार पर.

यदि आप एक सरल समाधान बंद साइट चाहते हैं तो आप कर सकते हैं सास मिश्रण डाउनलोड करें. यह थोड़ा पेचीदा है क्योंकि इसके लिए एक Sass मैप की आवश्यकता होती है, इसलिए आपको यह समझने की आवश्यकता होगी कि कस्टम गुणों को कैसे जोड़ा जाए और अपने सिंटैक्स को ठीक से लिखें.

यहां बताया गया है कि आप कैसे हैं मिक्स कॉल करें:

 @include WaitAnimate ((एनिमेशननाम: एनिमनेम, कीफ्रेम: (0: (ट्रांस्फ़ॉर्म: स्केल (1), बैकग्राउंड-कलर: ब्लू)), 50: (ट्रांसफ़ॉर्म: स्केल (2), बैकग्राउंड-कलर: ग्रीन), 100 (ट्रांस्फ़ॉर्म : स्केल (3), पृष्ठभूमि-रंग: लाल), अवधि: 2, प्रतीक्षा समय: 1, समय सीमा: सहजता, पुनरावृति: अनंत)); 

प्रो वेब डेवलपर्स को रस्सियों को सीखने और इसे एक पुन: प्रयोज्य मिश्रण में बनाने में कोई समस्या नहीं होनी चाहिए। लेकिन नौसिखिए डेवलपर्स इसे काम करने के लिए संघर्ष कर सकते हैं, इसलिए वेब ऐप.

यह सब सोर्स कोड मुफ्त में उपलब्ध है गिटहब पर यदि आप स्थानीय रूप से कॉपी डाउनलोड करना चाहते हैं। लेकिन चूंकि यह ऐसी अजीब विशेषता है, यह ऐसी चीज नहीं है जिसकी आपको कई परियोजनाओं में आवश्यकता होगी। इसलिए वात! चेतन वेब ऐप आपकी सहायता के लिए पर्याप्त से अधिक होना चाहिए एकबारगी समस्या का समाधान करें का शुद्ध CSS के साथ लूप किए गए एनिमेशन में देरी करना.

यह वास्तव में मज़ेदार हैक है जो डिज़ाइन द्वारा बहुत अस्पष्ट है। लेकिन यह दिखाने के लिए जाता है कि CSS3 और थोड़ी सरलता के साथ कितना संभव है.