How CSS Animations Work (and How to Preview Them)

CSS Animations lets you preview catalog motion and copy the CSS before it lands in a global stylesheet. Use Color Studio so the moving thing uses the same primary as the rest of the UI. This is concrete CSS, not a theory of “delight.”

Keyframes versus transitions

Transition - attach to a selector:

.button {
  background: var(--primary);
  transition: background-color 150ms ease, transform 150ms ease;
}
.button:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

The browser only animates when the value changes. No change, no work.

Keyframes - a named timeline:

@keyframes spin {
  to { transform: rotate(360deg); }
}
.loader {
  animation: spin 0.8s linear infinite;
}

You get delay, iteration count, direction (alternate), fill-mode, and multiple waypoints (0%, 40%, 100%). That power is how people accidentally ship a 2-second bounce on every card.

Rule of thumb: if a user action causes the change, start with a transition. If the element must move while the user waits, use a short, looping keyframe.

Easing, duration, and what feels expensive

Duration. Buttons and toggles: 100–200 ms. Page-level fades: 200–300 ms. Anything over 400 ms on a repeated control feels like lag. Loaders can loop; they should still complete a visual cycle quickly so the motion reads as “working,” not “stuck.”

Easing. ease-out for things that enter (fast start, settle). ease-in for things that leave. linear for constant spins. cubic-bezier when the catalog’s curve matches a motion you already previewed. ease-in-out on a 80 ms color change is wasted nuance.

Delay. Staggered lists look expensive because they are more timers. A 40 ms stagger on five items is enough; 200 ms × 12 items is a film.

Preview the exact curve in CSS Animations before you paste. Then cut 20% off the duration. Almost no one will complain that a hover is too snappy.

Compositor-friendly properties

Promote motion that can avoid layout and paint storms:

• Good: transform: translate, scale, rotate; opacity.
• Expensive on large surfaces: top/left, width/height, margin, animating box-shadow or filter on a full-page layer.

will-change: transform is a hint, not a free lunch. Use it on an element that will actually animate soon, then remove it. Painting a spinning 4K decorative blob behind the page will hitch no matter how “compositor-friendly” the property list is.

If the motion is a color wash, you are painting. Keep the layer small. Tokens from Color Studio keep the wash on-brand without a second magenta.

prefers-reduced-motion is not optional

Some people set the OS to reduce motion because it makes them ill. Your job is to honor that:

@media (prefers-reduced-motion: reduce) {
  .loader,
  .hero-kenburns {
    animation: none;
    transition: none;
  }
}

Replace a parallax hero with a static crop. Replace a looping bounce with a still icon. If a toast only appears because of an animation end event, show it immediately in the reduce branch.

Reduced motion is not “no color change.” A 100 ms background transition is usually fine. A sliding page plus zoom is not.

This is also an accessibility checkbox; A Practical WCAG Checklist will not catch every motion issue for you.

How to preview before you paste

1. Open CSS Animations and find a motion close to the need (fade, slide, pulse, spin).
2. Watch it at the catalog’s default duration, then imagine it on a 1× CPU phone.
3. Copy the keyframes. Rename them (@keyframes app-spin) so they do not collide.
4. Swap hard-coded colors for tokens.
5. Add the reduced-motion query in the same PR.
6. In the real page, confirm nothing else is animating width on the same frame.

The catalog is not a dependency. Once the CSS is in your repo, you do not need the tab.

What to leave as CSS and what to leave as JS

CSS: hover, focus-visible rings (do not animate the ring away), loaders, simple enter/leave if you can toggle a class.

JS (or Web Animations API): interruptible gestures, scroll-linked scenes, springs that should cancel mid-way. If you are already on Framer Motion for a reason, do not also run a CSS loop on the same node.

Favicons and palette work are separate steps - How to Generate Favicons will not make the tab icon dance, and it should not.

Preview the motion before you paste it

Preview the motion in CSS Animations, paint it with tokens from Color Studio, and ship a reduced-motion path in the same change. If the animation exists only to hide a slow request, fix the request.