Generate complete CSS animations — ten entrance/attention presets with duration, delay, easing (including a spring overshoot) — as an @keyframes block plus the animation shorthand, reduced-motion handled.
Settings
Generated locally in your browser — your settings and results never leave this page.
Keyframes and shorthand, generated together
A CSS animation is two pieces that must agree: the @keyframes block defining the motion and the animation shorthand playing it. This generator produces both from ten curated presets — fades, slides, zooms, a bounced zoom, flip, pulse, shake — with duration, delay, easing (including a spring-overshoot bezier) and looping under slider control. The preview replays on every change. This page also deliberately absorbs the “keyframe generator” job: the keyframes ARE the output.
Worked example
.slide-in-up {
animation: slide-in-up 0.5s ease-out both;
}
@keyframes slide-in-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}Details that prevent the classic bugs
- both fill-mode: the element holds its start state through any delay and keeps its end state after — without it, entrances snap back on completion.
- Only opacity + transform are animated: compositor-friendly, jank-free by construction.
- prefers-reduced-motion disables the animation in every export — delete it consciously or never.
Trigger patterns
- On mount: the class animates when it enters the DOM. Scroll reveals: add the class from an IntersectionObserver. Staggered lists: incremental animation-delay per item.
Related
- Tailwind projects: the Tailwind Animation Generator registers these as animate-* classes; spinners live in the Loader Generator.
How to use the CSS Animation Generator
- Choose an animation preset and tune duration, delay, easing and looping.
- Watch the live preview — change anything to replay.
- Copy the @keyframes block plus the animation shorthand.
Frequently asked questions
Does this cover the "keyframe generator" job too?
Yes — the @keyframes block IS the primary output, alongside the animation shorthand that plays it. One tool, deliberately, instead of two near-identical pages.
What does "both" do in the shorthand?
animation-fill-mode: both — the element holds the from-state before the animation starts (even through a delay) and keeps the end-state after. Without it, entrance animations snap back — the most common animation bug.
What is the spring easing option?
cubic-bezier(0.34, 1.56, 0.64, 1) — a y-value above 1 overshoots then settles, reading as bounce without keyframe gymnastics. Great for notifications and modals at 250–450ms.
