Animate transform and opacity

These properties keep motion smoother on repeated UI elements and dense dashboards.

Code example

Copy, adapt, and ship.

Read the numbered lines, copy the complete snippet, then adjust the values for your project.

CSS snippet

01.menu {02  opacity: 0;03  transform: translateY(8px) scale(0.98);04  transition: opacity 180ms ease, transform 180ms ease;05}06 07.menu[data-open="true"] {08  opacity: 1;09  transform: translateY(0) scale(1);10}

Production-ready starting point10 lines · copy with one click

Why this matters

The production reason.

01
Animating width, height, top, or left can force layout recalculation on every frame. That gets rough in lists, dashboards, and repeated UI.
02
Transform and opacity are easier for browsers to composite smoothly, so hover states, menus, sheets, and notification stacks feel cleaner.
03
For production UI, animate the layer, not the document flow. Reserve the final space first, then move or fade the element inside it.

Platform notes03

How it holds up outside a demo.

TailwindPrefer transition-transform, translate-y, scale, and opacity classes.
Framer MotionAnimate x/y/scale/opacity instead of layout dimensions when possible.
Shopify or WordPress menusAvoid animating max-height for large dropdowns; use opacity plus transform on a reserved panel.