CSS Animation Generator

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.

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.

Powered by