CSS Keyframe जनरेटर
उछाल, घुमाव, स्पंदन, हिलने या fade से शुरू करें, फिर frames बदलें। Play पर preview चलता है; CSS में वही मान और interval easing उपयोग होते हैं।
मुख्य फ़्रेम
0% और 100% सहित 2–20 अनूठे offset। क्रम translate → rotate → scale है। Output offset के अनुसार क्रमबद्ध होता है।
Play दबाने पर ही preview शुरू होता है। कभी भी रोकें। केवल sample आकार प्रभावित होता है।
उपयोग कैसे करें
उपयोग कैसे करें
- Preset चुनें या 0% और 100% सहित 2–20 अनूठे frames संपादित करें।
- अवधि, देरी, easing, दोहराव, दिशा और fill mode तय करें; preview चलाएँ या रोकें।
- CSS कॉपी या डाउनलोड करके अपने element पर animated-element class लगाएँ।
संपादन योग्य frames
हर frame में offset, क्षैतिज/ऊर्ध्वाधर गति, घुमाव, scale और opacity हैं। Output क्रमबद्ध है और दोनों endpoints चाहिए। गति ±500px, घुमाव ±3600deg, scale 0–5, opacity 0–1। मनमाने CSS properties या कई elements की timeline शामिल नहीं है।
Timing और preview
अवधि 0.1–60 सेकंड, देरी 0–60 सेकंड, 1–100 दोहराव या अनंत। पाँच standard easing या custom cubic-bezier और चार direction/fill modes हैं। स्थानीय Web Animations preview Play से शुरू होता है, hidden page पर बंद होता है और रोका जा सकता है। Preview क्षेत्र के बाहर आकार कट सकता है।
सादा CSS output
Upload या dependency नहीं। Export में keyframes और class हैं, HTML नहीं। कई animation मिलाते समय दोनों नाम बदलें और उपयोगकर्ताओं के लिए motion जाँचें; reduced-motion नियम अपने आप नहीं जुड़ता।
अक्सर पूछे जाने वाले सवाल
आप यह भी जानना चाहेंगे
क्या हर frame बदल सकते हैं?
हाँ। अनूठे offset पर transform और opacity जोड़ें, हटाएँ या बदलें। 0% और 100% रखें।
क्या अपने आप चलता है?
नहीं। Play दबाएँ। चलते समय मान्य edit preview फिर शुरू करता है; paused या stopped preview edit के बाद बंद रहता है।