हाल में उपयोग किए गए

    कोई टूल खोलें, वह यहाँ दिखाई देगा।

    CSS एनिमेशन जनरेटर

    दृश्य टाइमलाइन संपादक से CSS कीफ़्रेम एनिमेशन बनाएँ

    इस टूल को शेयर करें

    समस्या की रिपोर्ट करें

    निजी इनपुट या फ़ाइलें शामिल किए बिना समस्या का वर्णन करें।

    यह टूल कितना उपयोगी था?

    यह टूल कितना उपयोगी था?

    एनिमेशन सेटिंग

    एनिमेशन प्रीसेट

    कीफ़्रेम

    0% → 100%

    कीफ़्रेम · 0%

    कीफ़्रेम · 100%

    लाइव प्रीव्यू

    प्रीव्यू

    जनरेट किया गया CSS

    @keyframes myAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.animated-element {
  animation-name: myAnimation;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-delay: 0s;
}

    कीफ़्रेम संपादित करें और अपना एनिमेशन जाँचने के लिए फिर चलाएँ।

    त्वरित ट्रांसफ़ॉर्म उदाहरणtranslateX(100px) / translateY(-50px)rotate(45deg) / rotate(360deg)scale(1.5) / scale(0.5)झुकाव: skewX(10deg) / skewY(-5deg)परिप्रेक्ष्य: perspective(400px) rotateY(180deg)

    CSS एनिमेशन जनरेटर के बारे में

    हमारा मुफ़्त CSS एनिमेशन जनरेटर आपको शुरू से जटिल कोड लिखे बिना दृश्य रूप से पेशेवर कीफ़्रेम एनिमेशन बनाने देता है। अवधि और टाइमिंग फ़ंक्शन से लेकर अलग-अलग कीफ़्रेम गुणों तक, अपने एनिमेशन के हर पहलू को कॉन्फ़िगर करें और रियल टाइम में अपडेट होने वाले लाइव प्रीव्यू के साथ नतीजे तुरंत देखें।

    चाहे आपको हल्का फ़ेड-इन प्रभाव, आकर्षक बाउंस या कस्टम बहु-चरण एनिमेशन चाहिए, यह टूल 10 अंतर्निहित प्रीसेट और पूरा कीफ़्रेम एडिटर देता है। हर प्रीसेट पूरी तरह अनुकूलन योग्य है, इसलिए आप उन्हें शुरुआती बिंदु बना सकते हैं और किसी भी प्रतिशत बिंदु पर transform, opacity और बैकग्राउंड रंग सहित हर गुण को बारीकी से ठीक कर सकते हैं।

    जनरेटर उचित @keyframes सिंटैक्स और अलग-अलग animation गुणों के साथ साफ़, प्रोडक्शन-रेडी CSS कोड देता है। बस जनरेट किया गया कोड कॉपी करें और अपनी स्टाइलशीट में चिपका दें। सारी प्रोसेसिंग आपके ब्राउज़र में होती है और किसी सर्वर पर अपलोड नहीं होता, जिससे आपका काम निजी और सुरक्षित रहता है।

    डिज़ाइन

    हाल ही में जोड़े गए

    सभी टूल

    गोपनीयता सेटिंग

    एनालिटिक्स, विज्ञापन और वैयक्तिकरण के लिए अपनी प्राथमिकताएँ चुनें। ज़रूरी स्टोरेज आपकी थीम और सहेजे गए टूल जैसी सुविधाओं को चालू रखता है।

    ज़रूरी स्टोरेज हमेशा चालू रहता है।