CSS Animation Generator
Design Tools
Build CSS @keyframes animations visually. Tune transform, opacity, and color per step, preview live, and copy the @keyframes block plus the animation shorthand.
Runs entirely in your browserAbout CSS Animation Generator
CSS animations are how modern web interfaces move — page transitions, button hovers, loading spinners, fade-ins, attention-grabbing pulses. The native CSS `@keyframes` syntax is powerful but tedious to write by hand: you're typing percentages, transform functions, and easing names without seeing the result until you tab over to a browser. A visual editor closes that loop so you can iterate on the feel before settling the code.
This generator lets you tune all the animation-shorthand properties (name, duration, delay, timing function, iteration count, direction, fill mode), edit individual keyframe steps with sliders for transform (translate, rotate, scale), opacity, and background color, and watch the result animate continuously in a preview box on the right. Six preset patterns (Fade in, Slide in, Bounce, Pulse, Shake, Spin) get you started in one click. Output is two pieces of plain CSS: the `@keyframes` block and the `animation:` shorthand line — paste both into your stylesheet and you're done. No libraries, no framework lock-in.
How to use
- 1
Pick a preset to start (optional)
Use the Load preset dropdown to load Fade in, Slide in, Bounce, Pulse, Shake, or Spin. These give you a working baseline to modify.
- 2
Adjust the animation properties
Set the animation name (used in the @keyframes selector), duration, delay, timing function (ease curves), iteration count, direction, and fill mode.
- 3
Edit keyframes
Click any step in the Keyframes list to edit it. Sliders set the percent (0–100), transform values, opacity, and background color. Add new steps with +, remove with the trash icon.
- 4
Watch the preview
The box in the right column animates continuously with your current settings. Click Restart to re-trigger the animation from the start.
- 5
Copy the CSS
The output block shows both the `@keyframes` definition and the `animation:` shorthand. Copy both into your stylesheet.
Examples
Fade-in preset
Output
@keyframes fade-in {
0% { opacity: 0; background-color: #0ea5e9; }
100% { opacity: 1; background-color: #0ea5e9; }
}
.element {
animation: fade-in 600ms ease-out 0ms 1 normal none;
}Bounce preset
Output
@keyframes bounce {
0% { background-color: #0ea5e9; }
50% { transform: translate(0px, -30px); background-color: #0ea5e9; }
100% { background-color: #0ea5e9; }
}
.element {
animation: bounce 1000ms ease-in-out 0ms infinite normal none;
}Frequently asked questions
What's the difference between `transition` and `animation`?+
`transition` moves a property smoothly between two states (usually on hover or class change). `animation` runs through a sequence of keyframes and can loop indefinitely. Use transition for simple hover effects; use animation for anything that runs on its own or has more than two states.
Why are only transform + opacity + background-color exposed?+
Transform and opacity are GPU-accelerated and don't trigger layout reflow — they're the only properties you can safely animate at 60fps. Background-color is non-GPU but cheap. Animating width/height/left/top causes layout thrashing and frame drops. We've intentionally limited the tool to the performant property set; if you need others, write them by hand and test for jank.
What's `animation-fill-mode` for?+
It controls what styles the element shows before the animation starts (`backwards` fills with the 0% keyframe) and after it ends (`forwards` keeps the 100% keyframe applied). `both` does both. Without fill-mode, the element snaps back to its un-animated styles outside the animation window.
Should I respect prefers-reduced-motion?+
Yes — vestibular sensitivity is a real accessibility concern. Wrap your animation in a media query: `@media (prefers-reduced-motion: no-preference) { .element { animation: ... } }`. Users who've set the OS-level reduce-motion preference will see the element without animation.
Can I pause the animation?+
Yes — set `animation-play-state: paused` on the element. Common pattern: `.element { animation-play-state: paused; } .element:hover { animation-play-state: running; }`. The generator doesn't expose this directly; add it by hand to the copied CSS.
Why does my animation 'snap' at the end of each iteration?+
Because the iteration boundary jumps the element back to the 0% state. Use `animation-direction: alternate` to ping-pong instead — the element runs 0→100, then 100→0, then 0→100, with no snaps. Or set the 0% and 100% keyframes to the same values for visual continuity.
Is the preview accurate?+
Yes — the preview box renders with the exact same CSS the generator outputs. What you see is what you'll get in production.
Related tools
CSS Gradient Generator
Design linear, radial, and conic CSS gradients with a live preview.
Box Shadow Generator
Build multi-layer CSS box-shadow styles with offset, blur, and spread controls.
Flexbox Playground
Experiment with Flexbox container and item properties visually.
Border Radius Generator
Create custom rounded corners with per-corner control and squircle presets.
Color Palette Generator
Generate color palettes from a base color using complementary, triad, and other schemes.
Color Contrast Checker
Check WCAG AA/AAA contrast ratios between foreground and background colors. Find a passing color when yours fails.