CSS Animation Generator
Visually construct and preview CSS @keyframes animations, then export production-ready code.
Generated CSS
800ms
0
-30
0
1x
0
1
About the CSS Animation Generator
CSS animations use the @keyframes rule to define the starting and ending states of an element's appearance. Combined with the animation shorthand property, you can control duration, easing, delay, iteration count, and direction without any JavaScript. CSS animations are highly performant when applied to GPU-composited properties such as transform and opacity.
This generator lets you configure every animation variable through an interactive UI and instantly previews the live animated result, so you can iterate rapidly without writing any code until you're satisfied with the result.
How to Use This Tool
- Name Your Animation: Give your
@keyframesblock a descriptive name likeslideInorfadeUp. - Set Motion Props: Use the sliders to configure the end-state translation (X/Y), rotation (degrees), and scale factor.
- Configure Opacity: Set the starting and ending opacity to create fade-in, fade-out, or cross-fade effects.
- Adjust Timing: Choose the duration in milliseconds, the easing (timing function), and whether the animation loops infinitely.
- Preview & Export: Watch the live preview respond to your changes, then click "Copy CSS" to get the production-ready code.