CSS एनिमेशन जनरेटर
CSS एनिमेशन दृश्य रूप से बनाएँ।
Preview
Generated CSS
Animation Settings
Start State0%
End State100%
अनुशंसित टूल्स
चुने हुए उपयोगी टूल्स
हाथ से कोड लिखे बिना CSS एनिमेशन बनाना
अवलोकन
CSS एनिमेशन इंटरफ़ेस में जान डालते हैं — फ़ेड, स्लाइड, बाउंस और स्पिन — पर कीफ़्रेम हाथ से लिखना झंझट है। यह जनरेटर आपको एनिमेशन को दृश्य रूप से कॉन्फ़िगर करने देता है और चिपकाने को तैयार CSS देता है, ब्राउज़र में लाइव प्रीव्यू के साथ।
कैसे उपयोग करें (चरण-दर-चरण)
- 1
एनिमेशन प्रकार चुनें
फ़ेड, स्लाइड, बाउंस, स्पिन या अन्य प्रीसेट चुनें।
- 2
टाइमिंग समायोजित करें
अवधि, ईज़िंग, विलंब और दोहराव संख्या सेट करें।
- 3
CSS कॉपी करें
बने keyframes और animation नियम अपनी स्टाइलशीट में चिपकाएँ।
यह कैसे काम करता है
आप प्रकार, अवधि, टाइमिंग फ़ंक्शन, विलंब और पुनरावृत्ति जैसे गुण चुनते हैं, और टूल संबंधित @keyframes नियम और animation शॉर्टहैंड बनाता है। टाइमिंग फ़ंक्शन (ease, linear, cubic-bezier) गति का त्वरण आकार देता है, जबकि अवधि और पुनरावृत्ति गति और दोहराव नियंत्रित करते हैं। आप प्रभाव लाइव देखते हैं और बना CSS अपनी स्टाइलशीट में कॉपी करते हैं।
कब उपयोगी है
हीरो सेक्शन या कार्ड में हल्का प्रवेश एनिमेशन जोड़ना। लोडिंग स्पिनर या पल्स प्रभाव बनाना। कोड में डालने से पहले गति का प्रोटोटाइप करना।
अक्सर पूछे जाने वाले प्रश्न
यह गति का त्वरण वक्र नियंत्रित करता है — ease धीरे शुरू और खत्म होता है, linear स्थिर है, और cubic-bezier आपको कस्टम वक्र देता है।