Chapter 10: UI Animations Without Performance Jank

Animate smooth, efficient, and accessible

Animation is one of the most powerful tools in your UI toolkit.
It brings interfaces to life, guides attention, communicates feedback.

But bad animation? That just makes your site feel slow, clunky, or broken.

This chapter teaches you how to animate like a pro:

What properties to animate (and avoid)
How browsers handle animation under the hood
When to use transition, keyframes, or the Web Animations API
How to keep things smooth even on low-end devices

Section 10.1: Don’t Animate Everything, Only Animate What Matters

Good animation:

Reinforces meaning (e.g. button press, modal open)
Feels fast and natural
Doesn’t block interaction

Bad animation:

Animates layout (width, height, top, left) and causes jank
Ignores user motion preferences
Traps the user in an uninterruptible sequence

Rule: Animate opacity, transform, and scale.
Avoid layout properties unless you absolutely have to.

Section 10.2: How Browsers Handle Animation

There are 3 phases in rendering:

Style: compute styles (CSS rules, selector matching)
Layout: calculate positions and box sizes
Paint & Composite: draw pixels and layer them

GPU-accelerated properties:

transform
opacity
filter

These skip layout + paint and go straight to compositing (i.e. fast path).

Layout-triggering properties:

top, left, width, height, margin, padding

These cause reflow and force the browser to recalculate layout = slow.

Section 10.3: Use `transform` and `opacity` Instead

.modal {
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal.open {
  transform: scale(1);
  opacity: 1;
}

GPU-accelerated
No layout shift
Smooth and fast

Section 10.4: `transition` vs `@keyframes`

`transition`

Best for simple state changes (hover, toggle)
Requires a start + end state

button {
  transition: background-color 0.2s ease;
}

`@keyframes`

Best for custom movement, looping, staggered effects

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

Use with:

.element {
  animation: fadeIn 0.5s ease forwards;
}

Section 10.5: Easing Functions Matter

ease = default, usually fine
ease-in-out = good for smooth entry + exit
linear = constant speed (for progress bars)
cubic-bezier = fully custom

Example:

transition: all 300ms cubic-bezier(0.33, 1, 0.68, 1); /* Ease out */

Check easings.net to explore them visually.

Section 10.6: Accessibility: Respect Motion Preferences

Some users experience motion sickness or cognitive overload.

Respect their system preferences:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Always include this in your base styles.

Section 10.7: Animate With JavaScript (When Needed)

Use the Web Animations API for:

Dynamic values
Interactive timelines
Sequencing complex UI interactions

element.animate([
  { opacity: 0, transform: "scale(0.9)" },
  { opacity: 1, transform: "scale(1)" }
], {
  duration: 300,
  easing: "ease-out",
  fill: "forwards"
});

This runs on a separate thread and doesn’t block the main thread like jQuery used to.

Section 10.8: Performance Debugging

Use Chrome DevTools → Performance tab

Look for:

Paint flashing
Layout thrashing
Long scripting tasks

Also use:

Layers tab to see compositing
Lighthouse audit for animation bottlenecks

Section 10.9: Real Examples

.tooltip {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tooltip[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

Animate route/page entry

.page-enter {
  animation: fadeIn 300ms ease-out forwards;
}

Loading bar

.loader {
  width: 0;
  height: 4px;
  background: blue;
  animation: loading 2s linear infinite;
}

@keyframes loading {
  0% { width: 0; }
  100% { width: 100%; }
}

Summary

Animate opacity, transform, and scale for best performance
Avoid animating layout-affecting properties
Use transition for state toggles, @keyframes for timelines
Always include prefers-reduced-motion
Use the Web Animations API when CSS can’t do it cleanly
Debug with DevTools → Performance + Layers

Resources

Coming Up Next

In Chapter 11, we’ll cover building real-world UI components with HTML and CSS only: cards, modals, dropdowns, sliders in the semantic, accessible way.

← Previous