CSS animation generator बाट keyframe animations visually build गर्नुहोस् — keyframes define गर्नुहोस्, timing set गर्नुहोस्, real-time preview हेर्नुहोस्, clean CSS code copy गर्नुहोस्।
CSS Animations Visually बनाउनुहोस्
Keyframes define, preview, CSS code export गर्नुहोस्।
CSS Animation Basics
| Property | के Control गर्छ | Example |
|---|---|---|
| animation-name | कुन @keyframes | slideIn, fadeOut |
| animation-duration | कति समय | 0.3s, 1s |
| animation-timing-function | Speed curve | ease, linear |
| animation-fill-mode | Animation पछि state | forwards |
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; }
}Performance Tips
नियम: transform र opacity मात्र animate गर्नुहोस् — GPU-accelerated छन्।
| Property | Performance |
|---|---|
| transform, opacity | Excellent (GPU) |
| width, height, margin | Bad (layout trigger) |
How to Use the Tool (Step by Step)
- 1
Keyframes Define गर्नुहोस्
0%, 50%, 100% मा CSS properties set गर्नुहोस्।
- 2
Preview हेर्नुहोस्
Animation real-time मा हेर्नुहोस्।
- 3
CSS Copy गर्नुहोस्
Code copy गरेर CSS file मा paste गर्नुहोस्।
Frequently Asked Questions
Animation र transition मा के फरक छ?+−
Transitions दुई states बीच (hover, focus)। Animations multiple keyframes, loops, auto-play support गर्छन्।
Smooth animations कसरी?+−
Transform र opacity मात्र animate गर्नुहोस्। Duration 200-500ms राख्नुहोस्।
Animation final state मा कसरी रोक्ने?+−
animation-fill-mode: forwards set गर्नुहोस्।
यो generator free र private छ?+−
हो। Browser मा run हुन्छ। Code कतै जाँदैन।
CSS Animations Visually बनाउनुहोस्
Keyframes define, preview, CSS code export गर्नुहोस्।
CSS Animation Generator खोल्नुहोस् ->Related Guides
CSS Gradient Generator — Free Nepali (2026)
CSS gradient design, code copy।
Box Shadow Generator Guide
CSS box-shadow effects visually create गर्नुहोस्।
CSS Flexbox Generator Guide
Flexbox layouts visually build गर्नुहोस्।