CSS एनिमेशन जेनरेटर

Q: reduced-motion विकल्प क्या जोड़ता है?

एक `@media (prefers-reduced-motion: reduce)` ब्लॉक, जो उन उपयोगकर्ताओं के लिए `animation: none` सेट करता है जिन्होंने अपने ऑपरेटिंग सिस्टम में reduced motion चालू किया है।

प्रीसेट या अपने keyframes से CSS @keyframes एनिमेशन बनाएं और अवधि, देरी, दोहराव, दिशा, fill mode व cubic-bezier कर्व आसानी से सेट करें।

प्रीसेट

कीफ़्रेम

एनिमेशन का नाम

कीफ़्रेम (@keyframes { … } के अंदर)

हर लाइन में एक नियम, जैसे 50% { transform: scale(1.2); }। बेझिझक बदलें; प्रीव्यू तुरंत अपडेट होता है।

टाइमिंग

अवधिs

देरीs

दिशा

फ़िल मोड

लगातार दोहराएँ

टाइमिंग फ़ंक्शन

कम मोशन पसंद करने वाले यूज़र्स के लिए बंद करें

प्रीव्यू

CSS कोड

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.animated {
  animation: bounce 1s ease 0s infinite normal both;
}

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

CSS एनिमेशन जेनरेटर क्या है?

यह पूरा CSS एनिमेशन बनाता है: @keyframes नियम, animation शॉर्टहैंड और वैकल्पिक prefers-reduced-motion ओवरराइड। fade, slide, bounce, pulse, shake, spin या heartbeat जैसे प्रीसेट से शुरू करें, keyframes खुलकर एडिट करें और ड्रैग होने वाले cubic-bezier कर्व से टाइमिंग ढालें।

CSS एनिमेशन जेनरेटर का उपयोग कैसे करें

कोई प्रीसेट चुनें या अपने Keyframes लिखें (हर लाइन पर एक नियम)।
Animation name, Duration और Delay सेट करें।
Direction, Fill mode और Repeat forever या Iteration count चुनें।
Timing function चुनें या cubic-bezier हैंडल ड्रैग करें / X1, Y1, X2, Y2 लिखें।
दोबारा देखने के लिए Replay दबाएं, फिर CSS कोड कॉपी करें।

उदाहरण

इनपुट

Pulse preset, iterations 3, direction alternate, delay 0.5s, cubic-bezier(0.68, -0.6, 0.32, 1.6), reduced-motion off

आउटपुट

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.animated {
  animation: pulse 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.5s 3 alternate both;
}

CSS एनिमेशन जेनरेटर का उपयोग कब करें

इसे एंट्रेंस इफ़ेक्ट, लोडर, ध्यान खींचने वाले संकेत और माइक्रो-इंटरैक्शन के लिए इस्तेमाल करें। सरल स्टेट बदलाव (होवर रंग, आकार) के लिए CSS transition काफ़ी है। reduced-motion विकल्प चालू रखें ताकि जो उपयोगकर्ता अपने OS से कम मोशन माँगते हैं उन पर बड़ी हलचल का असर न पड़े।

CSS एनिमेशन जेनरेटर कैसे काम करता है

keyframes टेक्स्ट @keyframes name { … } में लपेटा जाता है और सेटिंग मानक शॉर्टहैंड क्रम name duration timing-function delay iteration-count direction fill-mode में लिखी जाती हैं। bezier एडिटर X वैल्यू को 0–1 तक सीमित रखता है (जैसा CSS चाहता है), जबकि Y बाउंस जैसे इज़िंग के लिए आगे निकल सकता है; जब चारों वैल्यू किसी CSS कीवर्ड (ease, linear, ease-in, ease-out, ease-in-out) के बराबर हों तो कीवर्ड लिखा जाता है। नाम को मान्य CSS आइडेंटिफ़ायर में साफ़ किया जाता है। प्रीव्यू निजी keyframes नाम इस्तेमाल करता है ताकि वह पेज के अपने एनिमेशन से न टकराए।

सामान्य उपयोग मामले

fade या slide-in एंट्रेंस एनिमेशन
अनंत स्पिनर और पल्सिंग लोडर
अमान्य फ़ॉर्म इनपुट पर shake फ़ीडबैक
उछलते स्क्रॉल-डाउन इंडिकेटर
ब्रांड-विशेष मोशन के लिए कस्टम इज़िंग

अक्सर पूछे जाने वाले प्रश्न

fill mode क्या करता है?

forwards एनिमेशन ख़त्म होने के बाद आख़िरी keyframe रखता है, backwards delay के दौरान पहला keyframe लागू करता है, both दोनों करता है, और none कोई नहीं।

bezier के X मान 0–1 तक क्यों सीमित हैं?

X समय को दर्शाता है, जो पीछे नहीं जा सकता, इसलिए CSS 0–1 से बाहर की वैल्यू अस्वीकार करता है। Y प्रगति को दर्शाता है और प्रत्याशा या उछाल बनाने के लिए आगे निकल सकता है।

reduced-motion विकल्प क्या जोड़ता है?

एक @media (prefers-reduced-motion: reduce) ब्लॉक, जो उन उपयोगकर्ताओं के लिए animation: none सेट करता है जिन्होंने अपने ऑपरेटिंग सिस्टम में reduced motion चालू किया है।