CSS एनीमेशन (keyframes) जनरेटर

यह कैसे काम करता है

@keyframes नियम किसी एनीमेशन की अवधि के विभिन्न प्रतिशतों पर तत्व की स्थिति का वर्णन करता है, जबकि animation संपत्ति उस अनुक्रम को एक तत्व से उसकी अवधि, गति और दोहराव की संख्या के साथ जोड़ती है। कोई तैयार टेम्पलेट चुनें (फेड, बाउंस, रोटेशन...), पैरामीटर समायोजित करें और अंतिम कोड उसके @keyframes नियम और animation घोषणा के साथ प्राप्त करें।

इस एनीमेशन को अपने खुद के तत्व पर कैसे लागू करें?

अपनी स्टाइल शीट में @keyframes नियम को ज्यों का त्यों कॉपी करें, फिर .mon-element चयनकर्ता को उस HTML तत्व की क्लास या आईडी से बदलें जिसे आप एनिमेट करना चाहते हैं।

कौन सा गति वक्र चुनें?

ease-in-out ज़्यादातर इंटरफ़ेस एनीमेशन के लिए उपयुक्त है क्योंकि यह आसानी से शुरू और समाप्त होता है; linear निरंतर रोटेशन (जैसे लोडिंग इंडिकेटर) के लिए अधिक उपयुक्त है, जबकि ease-out एक स्पष्ट आगमन प्रभाव देता है जो अक्सर तत्वों के प्रकट होने के लिए उपयोग किया जाता है।

कोड पूरी तरह से आपके ब्राउज़र में उत्पन्न और पूर्वावलोकित किया जाता है, बिना किसी सर्वर कनेक्शन के।