Animatable zoom

at a glance

background

The CSS zoom property was standardised in Chrome 128 (shipping as part of the Interop 2024 effort). Unlike transform: scale(), zoom affects layout — a zoomed element still occupies its scaled size in the document flow, and neighbouring elements move accordingly.

Before Chrome 150, changing zoom was instantaneous: no transition was applied even if transition: zoom was declared. Chrome 150 makes zoom a proper interpolatable CSS number, so transitions and keyframe animations on it produce smooth scaling that also animates the surrounding layout.

zoom vs transform: scale()

Use zoom when you need scaling to affect document flow (e.g. zooming a sidebar widget). Use transform: scale() when you want paint-level scaling with no reflow cost.

examples

transition on hover

.card {
  zoom: 1;
  transition: zoom 0.3s ease;
}
.card:hover {
  zoom: 1.05;
}

The card grows slightly on hover and the surrounding flow adjusts smoothly — other cards shift to accommodate the larger box.

keyframe animation

@keyframes pop-in {
  from { zoom: 0.5; opacity: 0; }
  to   { zoom: 1;   opacity: 1; }
}

.dialog {
  animation: pop-in 0.25s ease-out forwards;
}

zoom is a <number>, not a <length>

/* Valid zoom values */
zoom: 1;       /* no change */
zoom: 1.5;     /* 150% */
zoom: 0.8;     /* 80% */
zoom: normal;  /* equivalent to 1 */

/* Interpolation follows the number type */
transition: zoom 300ms;

browser support

see also

• MDN: zoom CSS property
• chromestatus.com — Animatable zoom (5183671737909248)