सीएसएस कीफ़्रेम एनिमेशन जेनरेटर

CSS @keyframes नियम वास्तव में एक छोटी सी समयरेखा है: प्रतिशत चौकियों का एक सेट, प्रत्येक यह घोषणा करता है कि किसी संपत्ति को उस सटीक क्षण में कैसा दिखना चाहिए, ब्राउज़र बीच में सब कुछ प्रक्षेपित करता है। हाथ से एक निर्माण करने का मतलब है कि कई संपत्तियों में एक साथ कई प्रतिशत चौकियों को अपने दिमाग में रखना - यह जनरेटर उस समयरेखा को ऐसी चीज़ में बदल देता है जिसे आप वास्तव में देख और खींच सकते हैं: प्रति संपत्ति एक क्षैतिज लेन, प्रत्येक चेकपॉइंट पर एक स्टॉप मार्कर के साथ।

केंद्रबिंदु स्क्रब प्लेहेड है। इसे 0% और 100% के बीच किसी भी बिंदु पर खींचें और पूर्वावलोकन बॉक्स उस पल में सटीक संयुक्त स्थिति में पहुंच जाता है - निकटतम कीफ़्रेम नहीं, बल्कि प्रत्येक सक्रिय ट्रैक पर प्लेहेड को घेरने वाले दो स्टॉप के बीच गणना की गई एक वास्तविक रैखिक-प्रक्षेपित मान। स्थिति, घूर्णन और पैमाने जैसे संख्यात्मक गुण सादे संख्याओं के रूप में प्रक्षेपित होते हैं; पृष्ठभूमि-रंग प्रत्येक लाल, हरे और नीले चैनल को स्वतंत्र रूप से प्रक्षेपित करता है, जो आपके द्वारा वास्तव में सेट किए गए रंगों के बीच कूदने के बजाय मध्यवर्ती रंगों के माध्यम से रंग ट्रैक को आसानी से फीका कर देता है।

एकाधिक ट्रैक स्वचालित रूप से एक सुसंगत एनीमेशन में संयोजित होते हैं: प्रत्येक ट्रांसफ़ॉर्म-आधारित संपत्ति (मूव, रोटेट, स्केल) प्रत्येक कीफ़्रेम प्रतिशत पर एकल ट्रांसफ़ॉर्म घोषणा में विलीन हो जाती है, जबकि अपारदर्शिता और पृष्ठभूमि-रंग अपनी स्वयं की रेखाओं पर रहते हैं, बिल्कुल वास्तविक हस्त-लिखित सीएसएस की तरह दिखते हैं। ऐसे प्रतिशत जहां किसी दिए गए ट्रैक में कोई स्पष्ट स्टॉप नहीं है, उन्हें जानबूझकर उस संपत्ति की घोषणाओं से बाहर रखा गया है - ब्राउज़र का स्वयं का कीफ़्रेम इंटरपोलेशन जो भी स्टॉप मौजूद है, उसके बीच के अंतर को भरता है, उसी तरह यह आपके द्वारा हाथ से टाइप किए गए किसी भी @keyframes नियम के लिए होगा।

पांच प्रीसेट - बाउंस, शेक, पल्स, फ़ेड और स्लाइड-इन - एक क्लिक में एक पूर्ण, रेडी-टू-ट्वीक टाइमलाइन (एक समझदार अवधि, टाइमिंग फ़ंक्शन और रिपीट काउंट सहित) लोड करें। गतिशील रूप से इंजेक्ट की गई स्टाइलशीट के माध्यम से तुरंत उत्पन्न पूर्वावलोकन तत्व पर चलने वाले वास्तविक सीएसएस एनीमेशन को देखने के लिए किसी भी बिंदु पर प्ले दबाएं, फिर पूर्ण @कीफ्रेम ब्लॉक और .एनिमेटेड-एलिमेंट {एनीमेशन: ...} शॉर्टहैंड को सीधे अपने प्रोजेक्ट में कॉपी करें। इस साइट के प्रत्येक टूल की तरह, यह सब ब्राउज़र में स्थानीय रूप से चलता है और कभी भी कुछ भी अपलोड नहीं किया जाता है।