CC
0 XP
0

Chapter 3: Polish & Design

CSS Transitions

build5 min

CSS Transitions

Transitions are the difference between an app that feels clunky and one that feels fluid. Every state change — hover, focus, checked, deleted — should animate smoothly.

The transition audit

"Audit all interactive elements in the app and add smooth CSS transitions. Every hover state, focus state, and color change should transition over 150ms with ease-out timing. This includes: button hover/active states, input focus borders, checkbox state changes, todo item hover backgrounds, and any color changes."

💡Info

150-200ms is the sweet spot for UI transitions. Faster feels abrupt. Slower feels sluggish. Claude Code knows this, but it's good to specify your preference.

Transition fundamentals

There are three things you need for a smooth transition:

/* The element needs to know what to animate, how long, and what easing */
.button {
  transition: background-color 150ms ease-out, transform 100ms ease-out;
}
 
/* Then the state change triggers the animation */
.button:hover {
  background-color: rgb(var(--color-primary-hover));
}
 
.button:active {
  transform: scale(0.98);
}
✅Tip

That scale(0.98) on active state is a subtle touch — it makes buttons feel like they physically press down when clicked. A tiny detail that makes the UI feel tactile.

What to transition

  1. Buttons — Background color on hover, subtle scale on active
  2. Inputs — Border color and box-shadow on focus
  3. Todo items — Background color on hover
  4. Checkboxes — Background and check mark appearance
  5. Delete buttons — Color change to danger on hover
  6. Links and interactive text — Color on hover

The Tailwind way

With Tailwind, transitions are applied via utility classes:

<button className="transition-colors duration-150 ease-out hover:bg-primary-hover">
  Add Todo
</button>

"Make sure all interactive elements use Tailwind's transition utilities. Use transition-colors for color changes, transition-all for elements that change multiple properties, and duration-150 as the default timing."

What NOT to transition

⚠️Warning

Don't transition height: auto changes or layout properties like width and margin — they cause layout recalculations and feel janky. We'll use proper animation libraries for those in section 10.

Avoid transitioning:

  • Layout properties (width, height, margin, padding)
  • display or visibility changes
  • Complex shadow changes (transition opacity instead)

The checkbox animation

The checkbox deserves special attention. A satisfying check animation makes completing a todo feel rewarding:

"Make the checkbox transition smooth. When checking a todo, the checkbox should fill with the primary color and a white checkmark should appear. The todo text should get a strikethrough with a slightly muted color. All of this should animate over 200ms."

After this section, your app should feel fluid. No more instant color jumps or jarring state changes. Everything glides smoothly from one state to the next.

PreviousNext