CSS Animation Generator
Build CSS keyframe animations with live preview.
Box
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 1s ease 0s 1 normal both;
}इस टूल के बारे में
CSS एनिमेशन जेनरेटर कीफ्रेम प्रीसेट, टाइमिंग, अवधि, विलंब और पुनरावृत्ति सेटिंग्स को कॉन्फ़िगर करके सुचारू CSS एनिमेशन बनाता है। लाइव पूर्वावलोकन एनिमेशन को क्रिया में दिखाता है।
transform और opacity का उपयोग करने वाले CSS एनिमेशन कुशल हैं क्योंकि ये GPU पर संयोजित होते हैं और लेआउट या रिपेंट को ट्रिगर नहीं करते।
कैसे उपयोग करें
- ड्रॉपडाउन से एनिमेशन प्रकार चुनें।
- अवधि सेट करें (जैसे 0.5s, 2s)।
- ईजिंग नियंत्रित करने के लिए टाइमिंग फ़ंक्शन चुनें।
- वैकल्पिक रूप से एनिमेशन शुरू होने से पहले विलंब सेट करें।
- पुनरावृत्ति संख्या सेट करें (संख्या या infinite)।
- पूर्वावलोकन के लिए फिर से चलाएं पर क्लिक करें, फिर CSS निर्यात करने के लिए कॉपी करें।
उपयोग के मामले
फ्रंट-एंड डेवलपर्स सामग्री लोड करते समय अनुभवात्मक प्रदर्शन सुधारने के लिए फेड और स्लाइड एनिमेशन का उपयोग करते हैं। UI डिजाइनर बटन पल्स जैसे माइक्रो-इंटरैक्शन प्रोटोटाइप करते हैं।
अक्सर पूछे जाने वाले प्रश्न
- fill-mode: both क्या है? — एनिमेशन शुरू होने से पहले प्रारंभिक स्टाइल लागू करता है और समाप्त होने के बाद अंतिम स्टाइल बनाए रखता है। यह सबसे उपयोगी सेटिंग है।
- एनिमेशन को हमेशा के लिए लूप कैसे करें? — पुनरावृत्ति संख्या को infinite पर सेट करें।
- क्या CSS एनिमेशन JavaScript से बेहतर हैं? — सरल प्रभावों के लिए CSS एनिमेशन बेहतर हैं। जटिल अनुक्रमण के लिए JavaScript अधिक नियंत्रण प्रदान करता है।