v150 · CSS · Animation

Compatibility Lab

Runs CSS.supports() probes for animatable zoom, shows the layout difference versus the transform: scale() fallback, and provides a progressive-enhancement pattern that uses zoom transitions where available and gracefully falls back to scale.

browser support probes

live comparison — hover the card

Hover card B in each row. Zoom expands layout; scale leaves neighbors frozen.

Code: zoom (supported) vs transform: scale (fallback)

✓ Chrome 150+ (animatable zoom)

.card { zoom: 1; transition: zoom 0.35s ease; } .card:hover { zoom: 1.4; }

⚠ Fallback (transform: scale)

.card { transform: scale(1); transition: transform 0.35s ease; } .card:hover { transform: scale(1.4); /* ⚠ layout box unchanged — neighbors don't move */ }

progressive enhancement pattern

/* Progressive enhancement: zoom where supported, scale as fallback */

.card {
  /* Fallback — works everywhere */
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.card:hover {
  transform: scale(1.4);
}

/* Override with zoom where animatable zoom is supported (Chrome 150+) */
@supports (transition-property: zoom) {
  .card {
    transform: none;
    zoom: 1;
    transition: zoom 0.35s cubic-bezier(0.34,1.56,0.64,1);
  }

  .card:hover {
    transform: none;
    zoom: 1.4;
  }
}

implementation reference

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