CSS एनिमेशन जनरेटर
CSS Animation Generator fade in, slide in, bounce in, pulse, spin, shake और zoom जैसे 14 presets से @keyframes animations बनाता है, duration, timing function और iteration count के कंट्रोल के साथ।
इस टूल के बारे में
CSS Animation Generator fade in, slide in, bounce in, pulse, spin, shake और zoom जैसे 14 presets से @keyframes animations बनाता है, duration, timing function और iteration count के कंट्रोल के साथ।
इस्तेमाल कैसे करें
- कोई animation preset चुनें।
- duration, timing function और iteration count सेट करें।
- प्रीव्यू देखने के लिए Replay दबाएं।
- @keyframes और animation rule पाने के लिए Copy CSS पर क्लिक करें।
जानने योग्य बातें
- CSS animation के दो हिस्से होते हैं: एक @keyframes rule और element पर एक animation property।
- performance के लिए transform और opacity को animate करना आमतौर पर सबसे smooth विकल्प है।
- ease-out जैसे timing functions तेज़ शुरू होकर धीमे होते हैं, जो entrance के लिए स्वाभाविक लगता है।
- जिन यूज़र्स ने कम motion माँगा है, उनके लिए prefers-reduced-motion media query का सम्मान करें।
- infinite iteration count loaders के लिए ठीक है; entrance effects आमतौर पर एक बार चलते हैं।
पूरी तरह आपके ब्राउज़र में चलता है — आप जो भी डालते हैं, वह न अपलोड होता है न सेव।
अक्सर पूछे जाने वाले सवाल
CSS animation कैसे बनाएं?
motion को @keyframes rule में परिभाषित करें, फिर animation: name duration timing iteration से उसे जोड़ें। generator दोनों आपके लिए लिख देता है।
CSS transitions और animations में क्या फ़र्क है?
transitions किसी property के बदलने पर, जैसे hover पर, दो states के बीच animate करते हैं। animations keyframes इस्तेमाल करते हैं, अपने-आप चल सकते हैं और loop कर सकते हैं।
animation को हमेशा loop में कैसे चलाएं?
iteration count को infinite पर सेट करें, जैसे animation: spin 1s linear infinite।
क्या CSS animations accessibility पर असर डालते हैं?
बड़ा या लगातार motion कुछ यूज़र्स को परेशान कर सकता है। ग़ैर-ज़रूरी animations को @media (prefers-reduced-motion: no-preference) में रखें।