AkousaCSS एनिमेशन जेनरेटर
लाइव प्रीव्यू, प्रीसेट इफ़ेक्ट्स, टाइमिंग नियंत्रण और तुरंत कोड आउटपुट के साथ दृश्य रूप से CSS एनिमेशन बनाएँ।
@keyframes नाम और एनिमेशन प्रॉपर्टी पहचानकर्ता के रूप में उपयोग किया जाता है।
animate-in fade-inTailwind CSS v3+ animate प्लगइन या tailwindcss-animate आवश्यक है।
@keyframes myAnimation {
0% { opacity: 0; }
100% { opacity: 1; }
}
.element {
animation: myAnimation 1s ease 0s infinite normal both;
}
/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
.element {
animation: none;
}
}CSS Animation Generator के बारे में
एक CSS animation generator आपको स्क्रैच से कोड लिखे बिना CSS @keyframes animations बनाने और अनुकूलित करने देता है। प्रीसेट एनिमेशन (fade, slide, bounce, आदि) में से चुनें, टाइमिंग, duration और iteration सेटिंग्स को समायोजित करें, real-time में प्रीव्यू करें, और जेनरेट किए गए CSS को सीधे अपने प्रोजेक्ट में कॉपी करें।
उपयोग कैसे करें
गैलरी से एक प्रीसेट एनिमेशन चुनें या कस्टम keyframes लिखें। नियंत्रणों का उपयोग करके duration, delay, timing function और iteration count को समायोजित करें। लाइव प्रीव्यू को तुरंत अपडेट होते देखें। अपने उपयोग के मामले से मेल खाने के लिए प्रीव्यू एलिमेंट की उपस्थिति को अनुकूलित करें। अपने stylesheet में पेस्ट करने के लिए तैयार पूर्ण एनिमेशन कोड प्राप्त करने के लिए 'Copy CSS' पर क्लिक करें।
सामान्य उपयोग के मामले
- UI components के लिए प्रवेश और निकास एनिमेशन बनाना
- loading indicators और attention effects बनाना
- बटन, कार्ड और notifications में microinteractions जोड़ना
- visual feedback के साथ CSS animation syntax सीखना
- client presentations के लिए एनिमेशन विचारों का त्वरित प्रोटोटाइपिंग