सीएसएस एनिमेशन जनरेटर प्रीसेट प्रभावों और अनुकूलन योग्य समय के साथ सीएसएस कीफ़्रेम एनिमेशन बनाएं।

सीएसएस एनिमेशन @keyframes नियमों के साथ एनिमेशन शॉर्टहैंड गुण का उपयोग करते हैं। एनिमेशन गुण जोड़ता है: animation-name (@keyframes नियम को संदर्भित करता है), animation-duration, animation-timing-function (ease, linear, ease-in, ease-out, ease-in-out, या कस्टम cubic-bezier), animation-delay, animation-iteration-count (संख्या या अनंत), animation-direction (सामान्य, उल्टा, वैकल्पिक, वैकल्पिक-उल्टा), animation-fill-mode (कोई नहीं, आगे, पीछे, दोनों), और animation-play-state (चालू, रोका)। @keyframes नियम प्रतिशत (0% से 100%) या from/to कीवर्ड का उपयोग करके एनिमेशन चरणों को परिभाषित करता है। प्रदर्शन के लिए, जब भी संभव हो, केवल ट्रांसफ़ॉर्म और अपारदर्शिता गुणों को एनिमेट करें, क्योंकि वे जीपीयू-त्वरित हो सकते हैं। अन्य गुण जैसे चौड़ाई, ऊंचाई, मार्जिन और पैडिंग लेआउट पुनर्गणना को ट्रिगर करते हैं। ब्राउज़र को आगामी एनिमेशन के बारे में संकेत देने के लिए will-change गुण का उपयोग करें।