Overlays

Modal Fade In Animation

A modal that scales up gently while its backdrop fades in behind it.

Confirm action

Supporting copy goes here.

Edit this in the studio

Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.

animation.css
.modal {
  transform: translate3d(0px, 0px, 0);
  transform-origin: 240px 160px;
}

.backdrop {
  transform: translate3d(-40px, -20px, 0);
  width: 560px;
  height: 360px;
  background: #05060acc;
  animation: backdrop-anim 1200ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes backdrop-anim {
  0% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.modal-panel {
  transform: translate3d(110px, 70px, 0);
  box-shadow: 0px 20px 60px 0px #00000088;
  width: 260px;
  height: 180px;
  background: #1c1e2a;
  border-radius: 18px;
  color: #e7e9ee;
  font-size: 14px;
  animation: modal-panel-anim 1200ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes modal-panel-anim {
  0% {
    transform: translate3d(110px, 176px, 0) scale(0.96, 0.96);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  19.25% {
    transform: translate3d(110px, 158.426px, 0) scale(1.004, 1.004);
    opacity: 1;
  }
  35% {
    transform: translate3d(110px, 160px, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(110px, 160px, 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .backdrop,
  .modal-panel {
    animation: none;
    transition: none;
  }
}

Why it is built this way

The backdrop and the panel are separate elements with separate timing: the backdrop fades flat while the panel rises and settles. Animating them as one block is the most common reason a modal feels cheap.

What it animates

4 properties across 2 CSS declarations on 2 elements. The bar shows when each one is moving.

Opacity
opacity
0 → 1
2 stopscompositor
Scale X
transform
0.96 → 1
2 stopscompositor
Scale Y
transform
0.96 → 1
2 stopscompositor
Y
transform
106 → 90px
2 stopscompositor

What it costs to run

Opacity, scale x, scale y and y are handled by the compositor: no layout, no repaint, and the work can run off the main thread. This is the cheap end of CSS animation, which is why it stays smooth on a slow phone where other properties will not.

It runs for 1.20s across 8 keyframe stops, with every property moving over the same window.

3 curves in play — Ease Out, Linear and Back Out. Different properties easing differently is how a movement gets texture: the eye reads the mismatch as weight rather than as a mistake.

Accessibility

Starting at opacity 0 makes the reduced-motion guard load-bearing rather than polite: strip it and a reader who asked for less movement gets no content at all, because nothing ever fades it in. It fades over 1.20s alongside scale x, scale y and y, and the guard skips all of it together. The generated CSS ends on the resting state, so skipping straight there is safe.

Related animations

CSS Fade In Animation
The plainest entrance there is: opacity 0 to 1, nothing else moving.
CSS Fade Out Animation
Fades an element away to nothing.
Dropdown Menu Animation
A dropdown that drops and fades in from just under its trigger.
modaldialogbackdropfade