CSS Interaction Tips

CSS Interaction Tips

Quick-reference for common CSS interaction and animation scenarios. Use when working on hover effects, transitions, button states, tooltips, popovers, tap targets, or any UI interaction polish.

Practical Tips

Code Snippets

Responsive button press

button:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

Smooth element entrance (not jarring)

.element {
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.element.visible {
  transform: scale(1);
  opacity: 1;
}

Fix jittery animation

.animated {
  will-change: transform;
}

will-change (when it helps, when it is a no-op)

Source: https://jakub.kr/components/will-change-in-css

The mental model: browsers render in three stages — Layout (CPU), Paint (CPU + memory), Compose (GPU). Composite-friendly properties (transform, opacity, filter, clip-path, mask) can skip Layout and Paint entirely. will-change is a hint that lets the browser promote the element to its own GPU layer during idle time, so the promotion cost isn't paid on the animation's first frame — that first-frame stutter is the specific thing it fixes. Safari shows the most noticeable improvement.

Rules:

1. Only on elements that actually animate, and name the exact properties (will-change: transform, opacity) — same discipline as never using transition-property: all.
2. Never universal (* { will-change: transform } is a bug): every promoted layer costs real memory.
3. It does nothing for Layout/Paint properties (top, background, color, width) — "the browser just reserves memory for nothing". If an animation is janky because it animates a paint property, fix the property choice first; will-change cannot rescue it.
4. Best applied just-in-time when possible: on the trigger's hover/focus for a panel about to open, removed when the animation family is done. A permanent will-change on an always-mounted element is a permanent memory hold — sometimes fine (one small cursor), sometimes not (every card on a page).
5. It is not a magic switch. Browsers already promote well on their own; reach for it only after seeing a first-frame stutter or Safari jank on a composite-friendly animation.

/* just-in-time promotion: hint while the open is imminent */
.menu-trigger:hover + .menu,
.menu-trigger:focus-visible + .menu {
  will-change: transform, opacity;
}

Large tap target via pseudo-element

button {
  position: relative;
}
button::after {
  content: '';
  position: absolute;
  inset: -10px; /* expands hit area by 10px on all sides */
}

Hover-only on desktop

@media (hover: hover) and (pointer: fine) {
  .element:hover {
    /* hover styles here */
  }
}

Popover from correct origin

.popover {
  transform-origin: top left; /* match to trigger position */
  transform: scale(0.95);
  transition: transform 0.15s ease;
}
.popover.open {
  transform: scale(1);
}