श्रेणी: डेवलपर टूल
CSS Keyframes जेनरेटर
एनिमेशन प्रीसेट चुनें और @keyframes ब्लॉक कॉपी करें
फ़ेड, स्लाइड, बाउंस, पल्स या स्पिन प्रीसेट चुनें, अवधि, टाइमिंग फ़ंक्शन, पुनरावृत्ति संख्या और दिशा सेट करें, और लाइव पूर्वावलोकन के साथ पूरा @keyframes ब्लॉक तथा उसे इस्तेमाल करने वाला animation शॉर्टहैंड कॉपी करें।
@keyframes localtools-preview {
from {
transform: translateY(0);
}
40% {
transform: translateY(-24px);
}
60% {
transform: translateY(0);
}
80% {
transform: translateY(-12px);
}
to {
transform: translateY(0);
}
}
.element {
animation: localtools-preview 1.2s ease-in-out infinite normal;
}जब भी आप प्रीसेट बदलते हैं, पूर्वावलोकन नीचे दिखाए गए ठीक उसी CSS के साथ फिर से शुरू होता है।
इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।
यह टूल क्या करता है
@keyframes ब्लॉक हाथ से लिखने का मतलब है प्रतिशत स्टॉप के नाम रखना और हर एक पर प्रॉपर्टी मान इस तरह तय करना कि वे आपकी उम्मीद के मुताबिक इंटरपोलेट हों, जो बाउंस जैसे कई स्टॉप वाले किसी एनिमेशन में सूक्ष्म रूप से गलत हो जाना आसान है। यह टूल आम एनिमेशन आकारों का एक सेट पहले से बनी स्टॉप-सूचियों के रूप में देता है, और उन टाइमिंग नियंत्रणों को बदलने देता है जो खुद keyframes को नहीं बदलते, ताकि पूर्वावलोकन हमेशा नीचे दिख रहे CSS ब्लॉक से बिल्कुल मेल खाए।
इस्तेमाल कैसे करें
- एक एनिमेशन प्रीसेट चुनें।
- अवधि, टाइमिंग फ़ंक्शन, पुनरावृत्ति संख्या और दिशा सेट करें।
- @keyframes ब्लॉक और उसके नीचे दिया animation शॉर्टहैंड कॉपी करें।
निजता
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।
अक्सर पूछे जाने वाले सवाल
- प्रीसेट बदलने पर पूर्वावलोकन फिर से क्यों शुरू होता है?
- प्रीसेट बदलने से अंतर्निहित @keyframes स्टॉप बदल जाते हैं, इसलिए पूर्वावलोकन तत्व को फिर से माउंट किया जाता है ताकि यह पक्का हो कि चल रहा एनिमेशन किसी पुराने को पूरा करने के बजाय अभी बने एनिमेशन से ही मेल खाए।
- पुनरावृत्ति संख्या "infinite" क्या करती है?
- यह एनिमेशन को हमेशा के लिए दोहराती है, जो पूर्वावलोकन डिफ़ॉल्ट रूप से इस्तेमाल करता है; अगर इसे तय संख्या में चलाकर रोकना हो तो इसकी जगह कोई संख्या सेट करें।
- क्या कुछ सर्वर पर भेजा जाता है?
- नहीं। @keyframes ब्लॉक और animation शॉर्टहैंड आपकी चुनी प्रीसेट और टाइमिंग सेटिंग से पेज में ही बनते हैं, इसीलिए पूर्वावलोकन तुरंत अपडेट होता है।