v150 · CSS · Animation · demo

Zoom vs Scale

Hover cards in each panel. The zoom panel shifts layout; the scale panel overlaps without moving anything. Both use the same timing function.

zoom layout-affecting

Card A

Card B

Card C

Hovered card grows in the flow → siblings move aside
transform: scale() paint-only

Card A

Card B

Card C

Hovered card scales visually → siblings stay put, overlap occurs
Live layout measurement — click to animate

zoom target — getBoundingClientRect()

—

width during animation

scale target — getBoundingClientRect()

—

width during animation (always base size)

/* zoom — layout changes during transition */
.card-zoom {
  zoom: 1;
  transition: zoom 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-zoom:hover { zoom: 1.15; }
/* getBoundingClientRect().width grows during hover */

/* transform — layout is frozen, only paint changes */
.card-scale {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-scale:hover { transform: scale(1.15); }
/* getBoundingClientRect().width stays the same during hover */

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗