CSS animation generator से keyframe animations visually build करें — keyframes define करें, timing functions set करें, real-time preview देखें — और clean CSS code copy करें।
CSS Animations Visually बनाएं
Keyframes define करें, timing set करें, preview देखें, CSS code export करें।
CSS Animation Basics
CSS animations दो components use करती हैं: @keyframes (क्या change होगा) और animation property (कैसे play होगा)।
| Property | क्या Control करता है | Example |
|---|---|---|
| animation-name | कौन सा @keyframes | slideIn, fadeOut |
| animation-duration | कितना time लगेगा | 0.3s, 1s |
| animation-timing-function | Speed curve (easing) | ease, linear, ease-in-out |
| animation-delay | शुरू होने से पहले wait | 0s, 0.5s |
| animation-iteration-count | कितनी बार repeat | 1, infinite |
| animation-fill-mode | Animation के बाद state | forwards, none |
Timing Functions (Easing) समझें
| Easing | Behavior | कब Use करें |
|---|---|---|
| ease-out | Fast start, slow end | Elements screen पर आ रहे हैं |
| ease-in | Slow start, fast end | Elements screen से जा रहे हैं |
| ease-in-out | Slow start और end | Looping animations |
| linear | Constant speed | Progress bars, rotation |
Entrances के लिए ease-out, exits के लिए ease-in। UI motion के लिए कभी linear use न करें — robotic feel आता है।
Common Animation Patterns
Fade In
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}Slide Up
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}Pulse
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}Performance Tips
Golden Rule: सिर्फ transform और opacity animate करें — ये GPU-accelerated हैं।
| Property | Performance |
|---|---|
| transform, opacity | Excellent (GPU) |
| width, height, margin | Bad (layout trigger) |
| top, left | Bad (layout trigger) |
prefers-reduced-motion media query use करें — motion sensitive users के लिए animations disable करें।
How to Use the Tool (Step by Step)
- 1
Keyframes Define करें
Keyframe points (0%, 50%, 100%) add करें, CSS properties set करें।
- 2
Timing Set करें
Duration, delay, easing choose करें।
- 3
Real-Time Preview देखें
Animation चलते हुए देखें, adjust करें।
- 4
CSS Code Copy करें
@keyframes rule और animation property copy करके CSS file में paste करें।
Frequently Asked Questions
Animation और transition में क्या difference है?+−
Transitions दो states के बीच animate करती हैं (hover, focus)। Animations multiple keyframes, loops, auto-play support करती हैं।
Animations smooth कैसे बनाएं?+−
सिर्फ transform और opacity animate करें (GPU-accelerated)। Width, height, margin animate करने से avoid करें। Duration 200-500ms रखें।
cubic-bezier क्या है?+−
Custom timing function — 4 control points define करते हैं। Bounce, overshoot, spring effects बना सकते हैं। Generator visual curve adjust करने देता है।
Animation final state पर कैसे रुके?+−
animation-fill-mode: forwards set करें। बिना इसके element original state पर snap back करता है।
क्या ये generator free और private है?+−
हां। Browser में ही run होता है। Code किसी server पर नहीं जाता।
CSS Animations Visually बनाएं
Keyframes define करें, timing set करें, preview देखें, CSS code export करें।
CSS Animation Generator खोलें ->Related Guides
CSS Gradient Generator — Beautiful Gradients Code (2026)
Linear, radial, conic gradient visually design। CSS code copy।
Box Shadow Generator Guide
CSS box-shadow effects visually create करें। Shadow anatomy, layered shadows और performance tips।
CSS Flexbox Generator Guide
Flexbox layouts visually build करें — direction, alignment, wrapping और gaps adjust करें।