web-animation-designउद्देश्य, उपयोग और स्रोत

यह कौशल क्या करता है

वेब एनिमेशन डिज़ाइन और कार्यान्वित करें जो स्वाभाविक और उद्देश्यपूर्ण प्रतीत हों। जब भी उपयोगकर्ता एनिमेशन, मोशन, ईज़िंग, टाइमिंग, अवधि, स्प्रिंग्स, ट्रांज़िशन या एनिमेशन प्रदर्शन के बारे में प्रश्न पूछे, तो इस कौशल का सक्रिय रूप से उपयोग करें। इसमें विशिष्ट UI तत्वों को एनिमेट करने का तरीका, उपयोग की जाने वाली ईज़िंग, एनिमेशन के सर्वोत्तम अभ्यास या मोशन के लिए अभिगम्यता संबंधी विचार शामिल हैं। ट्रिगर्स: ईज़िंग, ईज़-आउट, ईज़-इन, ईज़-इन-आउट, क्यूबिक-बेज़ियर, बाउंस, स्प्रिंग फ़िज़िक्स, कीफ़्रेम, ट्रांसफ़ॉर्म, अपारदर्शिता, फ़ेड, स्लाइड, स्केल, होवर इफ़ेक्ट, माइक्रोइंटरैक्शन, फ़्रेमर मोशन, रिएक्ट स्प्रिंग, GSAP, CSS ट्रांज़िशन।entrance/exitएनिमेशन, पेज ट्रांज़िशन, स्टैगर, विल-चेंज, जीपीयू एक्सेलरेशन, प्रेफरेंस-रिड्यूस्ड-मोशनmodal/dropdown/tooltip/popover/drawerएनिमेशन, जेस्चर एनिमेशन, ड्रैग इंटरैक्शन, बटन प्रेस फील, सब कुछ अटपटा लगता है, इसे स्मूथ बनाएं।

अपस्ट्रीम वर्कफ़्लो कैसे काम करता है

Before: transform: scale(0)
After: transform: scale(0.95)
────────────────────────────
Before: 400ms duration
After: 200ms

आवश्यकताएँ और सेटअप

इस फ़ाइल से कोई संक्षिप्त आवश्यकताएँ नहीं चुनी गईं। इसका मतलब यह नहीं है कि स्किल की कोई निर्भरता नहीं है। रिपॉजिटरी सेटअप निर्देशों और संदर्भित फ़ाइलों की जाँच करें।

सीमाएं और गुणवत्ता जांच

सुरक्षित परीक्षण से शुरुआत करें

1. समर्थित होस्ट और रिपॉजिटरी इंस्टॉलेशन निर्देशों की जाँच करें। स्किल डायरेक्टरी और उससे संबंधित स्क्रिप्ट, एसेट्स और डॉक्यूमेंटेशन को एक साथ रखें;SKILL.mdअकेले होने पर निर्भरताओं को छोड़ा जा सकता है।
2. एजेंट को अपना वास्तविक इनपुट, अपेक्षित आउटपुट और स्वीकृति मानदंड प्रदान करें। इनवोकेशन सिंटैक्स और उपलब्ध उपकरण होस्ट पर निर्भर करते हैं; यह साइट किसी सार्वभौमिक इंस्टॉलेशन कमांड को नहीं मानती है।
3. डिस्पोजेबल प्रोजेक्ट या उसकी कॉपी पर मूल वर्कफ़्लो को आज़माएँ। फ़ाइलों, रिमोट सेवाओं या बिल योग्य संसाधनों में परिवर्तन करने वाले कार्यों की अनुमति देने से पहले उनकी समीक्षा करें।
4. स्रोत गुणवत्ता जांच और अपनी आवश्यकताओं के आधार पर आउटपुट को सत्यापित करें। सफल ट्रिगर या उच्च रिपॉजिटरी स्टार संख्या सही परिणाम की गारंटी नहीं देते।

कौशल प्रारूप और निर्देशिका विनिर्देश ↗

मूल लेख में आगे पढ़ें

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

सम्बंधित योग्यता

• agent-browservercel-labs/open-agents
• ai-sdkvercel-labs/open-agents
• baseline-uivercel-labs/open-agents
• chat-sdkvercel-labs/open-agents

अनुवाद और दायरा

यह पठन मार्गदर्शिका ऊपर पिन किए गए अंशों में से चयनित अंशों को प्रस्तुत करती है।SKILL.mdयह अनुवाद सहायता से किया गया है। यह कोई संपूर्ण नियमावली या परीक्षित संगतता का दावा नहीं है। उपयोग करने से पहले मूल दस्तावेज़ और उससे संबंधित फ़ाइलों को पढ़ें।

यह परिचय नीचे पिन किए गए संस्करण को संदर्भित करता है; वर्तमान रिपॉजिटरी गतिविधि और संग्रह समय अलग से दिखाए गए हैं।

पिन किया गया स्रोत

मूल लेख पढ़ें ↗

स्रोत प्राप्त किया गया

2026-10-29T09:32:23Z

स्रोत कमिट

cf865e94de7729751c747171785b6ce57e7b178c

स्रोत SHA-256

dfcfd66edc4b09e22416c8be59160fd15259965e5f6f1cfa098858d7b23d4332