Animatable zoom

concepts

1. Zoom Gallery

   A card grid where hover triggers transition: zoom 0.3s ease. The zoomed card actually expands in the layout flow, nudging its siblings — impossible to achieve with transform: scale().

2. Zoom vs Scale

   Side-by-side comparison: the same hover interaction applied once with zoom and once with transform: scale(). See how layout reflows differently between the two approaches.

3. Keyframe Zoom

   zoom inside @keyframes — pick from four animation sequences (zoom-in, zoom-pulse, zoom-bounce, zoom-out-in) and watch the animated element push its neighbors as it grows, while the same animation using transform: scale() leaves layout frozen. The layout reflow is measured and logged live.

4. Product Focus

   An e-commerce grid with spring-animated zoom on hover. The hovered card physically expands and pushes its neighbours — the defining behaviour of zoom vs transform: scale(). Both grids side by side to compare directly.

5. Scroll Zoom Reveal

   Cards start at zoom: 0.7; opacity: 0 and spring into view via transition: zoom 0.5s cubic-bezier(0.34,1.56,0.64,1) when they enter the viewport. Because zoom affects layout, the spring-in physically shifts surrounding cards — a reveal effect impossible with transform: scale(). Add cards dynamically and scroll to watch them pop in.

6. Authoring Studio

   Dial in zoom-from, zoom-to, duration, easing, and trigger via live sliders and see the result in a three-card layout that shows how the animated card physically pushes its neighbors. Generates a copyable CSS snippet using the exact values you chose.

7. Compatibility Lab

   Runs six CSS.supports() probes for animatable zoom (property, transition-property, percentages, live style check), renders a side-by-side hover comparison of the zoom path versus the transform: scale() fallback, and provides a ready-to-copy @supports (transition-property: zoom) progressive-enhancement pattern.

why it shipped

CSS zoom has been a non-standard property supported across browsers for years, but it was not animatable — only transform: scale() could produce smooth scaling transitions. The key difference: zoom participates in layout (the zoomed element takes up its new scaled size in the document flow), while transform: scale() scales visually without affecting layout. Making zoom animatable unlocks smooth layout-affecting transitions previously impossible with pure CSS, complementing rather than replacing scale transforms.

references

• ChromeStatus entry
• ChromeStatus entry (current listing, Chrome 150)
• MDN — zoom
• CSS Viewport spec — zoom