CSS एनिमेशन जेनरेटर: इस्तेमाल कैसे करें

संक्षिप्त उत्तर

CSS एनिमेशन बनाने के लिए कोई प्रीसेट (fade, slide, bounce, pulse, spin, shake, zoom) चुनें या keyframes बदलें, अवधि, easing, देरी, दोहराव और दिशा सेट करें, लाइव प्रीव्यू देखें और @keyframes और animation का CSS कॉपी करें।

यह आपके ब्राउज़र में चलता है। जो आप डालते हैं वह अपलोड नहीं होता।

इस्तेमाल कैसे करें

अपना टेक्स्ट टूल में टाइप या पेस्ट करें।

ज़रूरी ऑप्शन चुनें।

नतीजा तुरंत अपडेट होता दिखेगा।

नतीजा कॉपी या डाउनलोड करें।

जो सीमाएँ मायने रखती हैं

क्या CSS एनिमेशन से परफ़ॉर्मेंस पर असर पड़ता है? transform और opacity को एनिमेट करना हल्का है क्योंकि इसे GPU संभालता है; width, height या top को एनिमेट करने से लेआउट दोबारा बनता है।

कम मोशन की पसंद का ध्यान कैसे रखूँ? बने हुए CSS में prefers-reduced-motion मीडिया क्वेरी होती है, जो कम मोशन चाहने वालों के लिए एनिमेशन बंद कर देती है।