CSS उपकरण/CSS एनीमेशन बिल्डर
CSS एनीमेशन बिल्डर
इंटरैक्टिव टाइमलाइन एडिटर के साथ शानदार CSS कीफ़्रेम एनीमेशन बनाएं
पूर्वावलोकन
Box
सेटिंग्स
1s
0s
प्रीसेट
टाइमलाइन
कीफ़्रेम पर 0%
कीफ़्रेम पर 50%
कीफ़्रेम पर 100%
CSS कोड
Loading...CSS Animation Guide
Learn how to create engaging CSS animations
What is CSS Animation?
CSS animations allow you to animate transitions between CSS styles. Unlike transitions, animations can have multiple keyframes that define intermediate steps, giving you complete control over the animation sequence. Animations can run automatically, loop infinitely, and be controlled with JavaScript.
How to Use This Tool
- Configure animation settings like duration, timing, and iteration
- Add keyframes to define animation states at different points
- Adjust properties like opacity, scale, rotation at each keyframe
- Preview the animation and copy the generated CSS code
Pro Tips
- Use the 'alternate' direction for smooth back-and-forth animations
- Combine transforms (scale, rotate, translate) for complex effects
- Use 'forwards' fill mode to keep the final state after animation ends
Browser Support
CSS animations are fully supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The @keyframes rule and animation properties have excellent cross-browser compatibility.
अक्सर पूछे जाने वाले प्रश्न
CSS एनिमेशन और ट्रांज़िशन में क्या अंतर है?
ट्रांज़िशन दो स्थितियों के बीच परिवर्तन को एनिमेट करता है और hover जैसे ट्रिगर की आवश्यकता होती है। एनिमेशन @keyframes से कई चरणों को परिभाषित कर सकता है, ऑटो स्टार्ट, इनफिनिट लूप, अधिक जटिल गति संभव है। साधारण स्थिति परिवर्तन के लिए ट्रांज़िशन, जटिल सीक्वेंस के लिए एनिमेशन का उपयोग करें।
एनिमेशन को इनफिनिट लूप कैसे करें?
animation-iteration-count: infinite का उपयोग करने से एनिमेशन इनफिनिट लूप होता है। शॉर्टहैंड प्रॉपर्टी में 'animation: myAnimation 2s infinite;' की तरह उपयोग करें। direction को alternate पर सेट करने से स्मूथ आगे-पीछे इफ़ेक्ट बनाया जा सकता है।
fill-mode क्या है और यह क्यों महत्वपूर्ण है?
animation-fill-mode निर्धारित करता है कि एनिमेशन से पहले और बाद में स्टाइल कैसे लागू करें। 'forwards' एनिमेशन समाप्ति के बाद अंतिम स्थिति बनाए रखता है, 'backwards' देरी के दौरान प्रारंभिक स्थिति लागू करता है। 'both' दोनों प्रभाव लागू करता है।
एनिमेशन प्रदर्शन को कैसे ऑप्टिमाइज़ करें?
केवल transform और opacity को एनिमेट करने से GPU एक्सेलेरेशन मिलता है और प्रदर्शन अच्छा होता है। width, height, top, left आदि रीफ्लो का कारण बनते हैं जिससे प्रदर्शन गिरता है। will-change प्रॉपर्टी से ब्राउज़र को संकेत दिया जा सकता है लेकिन अत्यधिक उपयोग से विपरीत प्रभाव होता है।
क्या JavaScript के बिना एनिमेशन को नियंत्रित किया जा सकता है?
animation-play-state: paused का उपयोग करके केवल CSS से एनिमेशन को पॉज़ किया जा सकता है। :hover या :focus स्थिति में इस प्रॉपर्टी को बदलकर उपयोगकर्ता इंटरैक्शन से नियंत्रित किया जा सकता है। अधिक सटीक नियंत्रण के लिए JavaScript के Web Animations API का उपयोग करें।