Question 1

What are the best CSS animation presets for UI?

Accepted Answer

Most commonly used: fadeIn/fadeOut (smooth presence/absence), slideInUp/slideInDown (panel reveals, notifications), bounce (attention, success confirmations), shake (error feedback, invalid input), pulse (live indicator, pending state), spin (loading spinner). For page transitions: fadeIn is safest. For micro-interactions: bounce for success, shake for error, pulse for loading — a clear semantic mapping between animation and meaning.

Question 2

What is the CSS animation shorthand?

Accepted Answer

The animation shorthand syntax: animation: name duration timing-function delay iteration-count direction fill-mode; Example: animation: fadeIn 0.3s ease 0s 1 normal forwards; Each value: name = @keyframes name, duration = how long one cycle takes, timing-function = easing curve (ease, linear, ease-in-out), delay = wait before starting, iteration-count = number of repeats (or 'infinite'), fill-mode = state before/after (forwards keeps final state).

Question 3

How do I respect prefers-reduced-motion?

Accepted Answer

Wrap all animations in a media query: @media (prefers-reduced-motion: no-preference) { .animated { animation: bounce 0.5s ease; } }. Or use the inverse: @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; } }. The first approach is safer — animations are opt-in for users without motion sensitivity. WCAG 2.3.3 (AAA) requires a mechanism to disable all motion.

Question 4

When should I use CSS animations vs. JavaScript animations?

Accepted Answer

CSS animations (and transitions): simple state changes, hover effects, loading indicators, entrance/exit animations. They run on the browser's compositor thread and don't block JavaScript. JavaScript animations (Web Animations API, GSAP, Framer Motion): complex sequences, physics-based motion, scroll-driven animations, animations that depend on real-time data. Rule: use CSS by default for performance and simplicity; use JS when the animation requires coordination, interactivity, or dynamic values CSS can't express.

CSS Animation Generator

Animation presets included

Entrance effects

Attention seekers

Rotation & flip

Exit effects

Full control

Copy-ready output

Frequently asked questions

Related design tools

Add motion to your UI in seconds