Should I respect prefers-reduced-motion?

Yes — accessibility requirement. Users with vestibular disorders, motion sickness, or cognitive sensitivities can disable motion at the OS level (Settings > Accessibility > Reduce Motion). Wrap your animations in @media (prefers-reduced-motion: no-preference) {`{ ... }`} so they only run for users who haven't requested reduced motion. WCAG 2.1 doesn't require this but it's strongly recommended; some jurisdictions are starting to enforce.

What's the right animation duration?

UI animations: 200-400ms is the sweet spot. Faster (100-200ms) feels snappy but rushed. Slower (500ms+) feels sluggish for UI. Ambient / decorative (loading spinners, hover effects): 1-3 seconds. Continuous loops: any duration; subtle is usually better. Material Design recommends 195-225ms for entry, 150-185ms for exit. Apple's HIG suggests 250ms typical.

Why are some properties janky?

Animating width, height, top, left, margin, padding causes layout reflow on every frame — slow, often janky. Animate transform (translateX/Y, scale, rotate) and opacity only — these are GPU-composited and don't trigger layout. To slide an element, use transform: translateX(100px) not left: 100px. To grow, use transform: scale(1.5) not width/height. This is the #1 performance lesson in CSS animation.

When should I use will-change?

Use sparingly. will-change: transform tells the browser “this property will change” — promotes the element to its own GPU layer. Helps performance for elements about to animate. BUT: leaving will-change on permanently wastes GPU memory and can hurt performance. Best practice: add will-change just before animation starts (via JS), remove after animation completes. For short animations (200-400ms), often unnecessary.

JavaScript animation libraries vs CSS?

CSS for: simple UI motion, hover effects, modal entries, loading indicators, anything that doesn't need precise mid-animation control. JavaScript libraries (GSAP, Framer Motion, Lottie) for: complex multi-element choreography, scroll-tied animations, physics simulations (springs, momentum), animations that need to start/stop/reverse based on dynamic conditions, SVG path animations. Most apps need 90% CSS / 10% JavaScript animation.

Why does my animation flicker?

Common causes: (1) Animation triggering layout reflow (animating width/height instead of transform). Fix: use transform/opacity only. (2) Background-image animations — these cause repaints. Fix: layered approach with transform on a separate element. (3) Compositing issue — element flickers between GPU and CPU rendering. Fix: add transform: translateZ(0) or will-change: transform to force GPU layer. (4) Browser-specific bugs in older Safari versions — test cross-browser.

Developer Utilities · Free tool

CSS Animation Generator

Generate custom CSS keyframe animations instantly by tweaking 8 presets for duration, delay, and easing. A free browser-only tool with no signup.

Updated June 2026

PresetDuration (0.8s)Delay (0s)Timing functionIterationsDirection

🚀

@keyframes fadeIn {
  0% { opacity: 0 } 100% { opacity: 1 }
}

.animated {
  animation: fadeIn 0.8s ease-out 0s 1 normal;
}

Found this useful?Email Buy Me a Coffee

What it does

CSS animations have replaced JavaScript-driven motion for the vast majority of UI animation use cases since CSS3 (2010 spec, broad browser support by 2013). The reasons: GPU-accelerated transforms run at 60fps without blocking the JavaScript main thread, declarative @keyframes syntax is more maintainable than imperative JS animation loops, and CSS animations gracefully degrade — older browsers without animation support just show the final state. The @keyframes rule defines stages (0% to 100% or named keywords like “from” and “to”), and the animation property applies them with timing controls. For most UI motion (fades, slides, scales, rotations, shakes), CSS is the right tool.

The generator produces ready-to-paste CSS for 8 common animation presets: fadeIn (opacity 0→1, the most-used animation), slideUp / slideDown (translateY-based slide-in motion, common for modal entrance), zoomIn (scale 0→1 with optional opacity), shake (horizontal translate oscillation, for error feedback), bounce (vertical translate with easing for attention), pulse (scale 1→1.05→1 loop for buttons / notifications), spin (rotate 360° continuous, for loaders). Each preset comes with sensible defaults and tunable parameters: duration (typically 300-600ms for UI; 1-3s for ambient effects), delay, timing function (ease-in-out is most natural; ease-out is “quick start slow finish”; cubic-bezier for custom curves), iterations (1, infinite, or specific count), and direction (normal, reverse, alternate).

Best practices for CSS animation: (1) Use transform and opacity properties only — these are GPU-composited, run at 60fps even during heavy main-thread work. Avoid animating width, height, top, left (causes layout reflows; janky). (2) Respect prefers-reduced-motion media query — wrap your animations: @media (prefers-reduced-motion: no-preference){ ... }. Users with vestibular disorders can disable motion at OS level; ignoring this is an accessibility violation. (3) Subtle is usually better — UI animations should be 200-400ms, imperceptible enough to feel natural. Animations over 1 second feel slow; over 2 seconds feel broken. (4) Don't animate everything — use animation purposefully (entrance, attention, state transition) not decoratively. (5) Test on slow devices — modern Macs run animations smoothly; budget Android phones may struggle if you stack many. Aim for 60fps on a 5-year-old phone.

Embed this tool on your siteShow snippet

Paste this snippet into any page. Loads on-demand (lazy), no tracking scripts, and sized to most dashboards. Replace the height to fit your layout.

<iframe src="https://freetoolarena.com/embed/css-animation-generator" width="100%" height="720" frameborder="0" loading="lazy" title="CSS Animation Generator" style="border:1px solid #e2e8f0;border-radius:12px;max-width:720px;"></iframe>

Embed docs →

How to use it

Pick a preset (fadeIn, slideUp, zoomIn, shake, bounce, pulse, spin, slideDown).
Tune duration (300-600ms typical for UI), delay, easing curve, iteration count.
Copy the resulting CSS — both the @keyframes block and the .animated class.
Apply the .animated class to your element via JavaScript or CSS hover/focus state.
Wrap in @media (prefers-reduced-motion: no-preference) for accessibility compliance.

When to use this tool

UI entrance animations (modals, dropdowns, toasts appearing).
Attention-grabbing animations (error shake, success pulse, notification bounce).
Loading indicators (spin, pulse).
State transition feedback (button press, card flip, accordion expand).
Subtle ambient motion (background gradient shift, hover transitions).

When not to use it

Complex multi-step animations beyond 5-6 keyframes — JavaScript libraries (GSAP, Framer Motion) handle these better.
Scroll-tied animations (parallax, scroll-triggered) — Intersection Observer + CSS or scroll-driven CSS animations needed.
Physics-based animations (springs, momentum) — JavaScript libraries with physics engines.
Animations longer than 2 seconds for UI — usually feels broken; reconsider whether you need motion at all.

Common use cases

Verifying a number or output before passing it on
Quick generation during a typical workday
Pre-decision sanity-check on inputs and outputs
Educational use — demonstrating the underlying concept

Frequently asked questions

Should I respect prefers-reduced-motion?: Yes — accessibility requirement. Users with vestibular disorders, motion sickness, or cognitive sensitivities can disable motion at the OS level (Settings > Accessibility > Reduce Motion). Wrap your animations in @media (prefers-reduced-motion: no-preference) {`{ ... }`} so they only run for users who haven't requested reduced motion. WCAG 2.1 doesn't require this but it's strongly recommended; some jurisdictions are starting to enforce.
What's the right animation duration?: UI animations: 200-400ms is the sweet spot. Faster (100-200ms) feels snappy but rushed. Slower (500ms+) feels sluggish for UI. Ambient / decorative (loading spinners, hover effects): 1-3 seconds. Continuous loops: any duration; subtle is usually better. Material Design recommends 195-225ms for entry, 150-185ms for exit. Apple's HIG suggests 250ms typical.
Why are some properties janky?: Animating width, height, top, left, margin, padding causes layout reflow on every frame — slow, often janky. Animate transform (translateX/Y, scale, rotate) and opacity only — these are GPU-composited and don't trigger layout. To slide an element, use transform: translateX(100px) not left: 100px. To grow, use transform: scale(1.5) not width/height. This is the #1 performance lesson in CSS animation.
When should I use will-change?: Use sparingly. will-change: transform tells the browser “this property will change” — promotes the element to its own GPU layer. Helps performance for elements about to animate. BUT: leaving will-change on permanently wastes GPU memory and can hurt performance. Best practice: add will-change just before animation starts (via JS), remove after animation completes. For short animations (200-400ms), often unnecessary.
JavaScript animation libraries vs CSS?: CSS for: simple UI motion, hover effects, modal entries, loading indicators, anything that doesn't need precise mid-animation control. JavaScript libraries (GSAP, Framer Motion, Lottie) for: complex multi-element choreography, scroll-tied animations, physics simulations (springs, momentum), animations that need to start/stop/reverse based on dynamic conditions, SVG path animations. Most apps need 90% CSS / 10% JavaScript animation.
Why does my animation flicker?: Common causes: (1) Animation triggering layout reflow (animating width/height instead of transform). Fix: use transform/opacity only. (2) Background-image animations — these cause repaints. Fix: layered approach with transform on a separate element. (3) Compositing issue — element flickers between GPU and CPU rendering. Fix: add transform: translateZ(0) or will-change: transform to force GPU layer. (4) Browser-specific bugs in older Safari versions — test cross-browser.

Learn more

Explore more developer utilities tools

100% in-browserNo downloadsNo sign-upMalware-freeHow we keep this safe →