CSS Animation Generator
Build CSS @keyframes animations visually. Pick a preset or design your own — duration, easing, iteration. Live preview, CSS + Tailwind output.
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
animation: fadeIn 400ms ease-out 0ms 1 normal both;
}animate-[fadeIn_400ms_ease-out_0ms_1_normal_both]
01 — Overview
How it works
A focused CSS animation builder. Pick from a library of common presets (fade in, slide, bounce, spin, pulse, shake) or tune duration, easing, delay, direction, and iteration count from scratch. Live preview reflects every change. Copy the result as CSS @keyframes + class, or as a Tailwind arbitrary value.
02 — Use cases
When to use it
- 01
Add a subtle fade-in to a hero section without writing keyframes
- 02
Get the right easing curve for a hover effect
- 03
Translate an animate.css class into clean inline CSS
- 04
Pick a duration that feels snappy, not sluggish (≤250ms for most UI)
03 — Examples
Real input, real output
Preset: fade-in-up, 400ms, ease-out
ex 01@keyframes fadeInUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: none; } }
The most-used entrance animation.
Preset: pulse, 1.6s, ease-in-out, infinite
ex 02@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
Live-indicator-style pulse, runs forever.
04 — FAQ
Frequently asked
05 — More
Tools that pair well
CSS Box Shadow Generator
Build CSS shadows with sliders for offset, blur, spread, color, and opacity. Live preview, multi-shadow stacking, copy as CSS or Tailwind.
CSS Gradient Generator
Build linear and radial gradients visually. Pick stops, angle, and direction; copy as CSS or Tailwind arbitrary value.
Glassmorphism Generator
Visual builder for frosted-glass cards. Sliders for blur, opacity, saturation, border — copy CSS or Tailwind.