Modal Dialog Entrance Easing

Modal Entrance Easing

Modal dialogs typically appear over existing content and demand attention. The entrance animation should feel swift but not jarring — the modal should seem to arrive deliberately and settle into place.

Recommended Curve

transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

This is the Material Design decelerate curve. It starts at full velocity and gradually slows down, which works perfectly for elements entering the viewport.

Why Decelerate for Modals?

When a modal appears, users need to quickly understand that new content has arrived. A fast start captures attention, while the gradual deceleration gives the modal a sense of weight and stability — it feels like it has "landed" rather than "snapped" into place.

Common Animation Properties

.modal-backdrop {
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.modal-backdrop.visible {
  opacity: 1;
}

.modal-content {
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  transition: opacity 300ms cubic-bezier(0, 0, 0.2, 1),
              transform 300ms cubic-bezier(0, 0, 0.2, 1);
}
.modal-content.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

Animation Breakdown

1. Backdrop: Fades in with a simple ease-out over 200ms. It should be quick so the modal content has a dimmed background to appear against.
2. Content: Scales from 95% to 100% and shifts upward by 10px, both with the decelerate curve over 300ms. The slight delay relative to the backdrop creates a staggered entrance.

Dismissal Animation

For closing the modal, use the accelerate curve (cubic-bezier(0.4, 0, 1, 1)) — the opposite of the entrance. The modal speeds up as it leaves, creating a sense of being dismissed.

.modal-content.closing {
  opacity: 0;
  transform: scale(0.95);
  transition: all 200ms cubic-bezier(0.4, 0, 1, 1);
}