Scale-In Modal Open Effect

The Two-Beat Scale

Apple's HIG uses a 92%→100% scale curve combined with opacity for almost every modal presentation. The View Transitions API can reproduce that with two short @keyframes:

.modal {
  view-transition-name: modal;
}
@keyframes scale-out {
  to { transform: scale(0.92); opacity: 0; }
}
@keyframes scale-in {
  from { transform: scale(0.92); opacity: 0; }
}
::view-transition-old(modal) {
  animation: 200ms ease-out both scale-out;
}
::view-transition-new(modal) {
  animation: 250ms cubic-bezier(0.16, 1, 0.3, 1) both scale-in;
}

Asymmetric durations

Notice the out animation is 200ms and the in animation is 250ms. Asymmetric durations feel more natural — exits should snap, entrances should arrive with a gentle ease-out. This matches the perceptual model: users want dismissal to feel responsive but presentation to feel intentional.

Combining with backdrop blur

When the modal scales in, animate the backdrop's opacity in parallel using a normal CSS transition on the backdrop element. Because the backdrop does not have its own view-transition-name, it joins the root group and cross-fades automatically — no double-animation conflicts.

Avoiding pixel snapping artifacts

Scaling from 92% can produce sub-pixel rendering glitches on text. Add will-change: transform to the modal during the transition and remove it after, or use transform: translate3d(0,0,0) on the inner content to force GPU compositing.