v150 · CSS · Animation

Keyframe Zoom

zoom in @keyframes — the animated element occupies its new scaled size in the layout flow, pushing neighbors aside as it grows. The right panel shows the same keyframe applied to transform: scale(), which scales visually without disturbing the document flow.

animation:
1s
zoom (layout-affecting)
Item A
Target
Item C
Item D
run to see layout shift
transform: scale() (layout-preserving)
Item A
Target
Item C
Item D
run to see no layout shift

code

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

@keyframes zoom-bounce {
  0%   { zoom: 0.2; }
  60%  { zoom: 1.1; }
  80%  { zoom: 0.95; }
  100% { zoom: 1; }
}

/* Element grows in layout — siblings are pushed */
.card {
  animation: zoom-bounce 1s ease-out;
}

/* Equivalent transform animation — siblings stay put */
@keyframes scale-bounce {
  0%   { transform: scale(0.2); }
  60%  { transform: scale(1.1); }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/*
   zoom: layout recalculated at each frame → siblings reflow
   transform: composited, layout frozen → siblings unchanged
*/

see also

implementation reference

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