Design Atlas
한국어
⇄ Transitions

Container transform

컨테이너 트랜스폼

A card in a list grows into the detail screen. The same element transforms, so the link between the two screens is obvious.

Also known as: Hero transitionShared element transition공유 요소 전환
···
html
<div class="stage"><div class="list"><i></i><i></i><i></i></div><div class="card"><b>Card</b></div></div>
css
.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.list{position:absolute;inset:8% 8%;display:grid;grid-template-columns:repeat(3,1fr);gap:6%}
.list i{border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.card{position:absolute;left:41.5%;top:8%;width:17%;height:84%;border-radius:12px;display:flex;align-items:flex-start;justify-content:center;padding-top:10%;
  background:linear-gradient(160deg,var(--accent),var(--accent-2));color:#fff;font:700 clamp(10px,3vmin,16px) sans-serif;
  animation:grow 3.8s cubic-bezier(.4,0,.2,1) infinite}
.card b{opacity:1;animation:txt 3.8s ease infinite}
@keyframes grow{0%,15%{left:41.5%;top:8%;width:17%;height:84%;border-radius:12px}
  45%,70%{left:0;top:0;width:100%;height:100%;border-radius:0}
  100%{left:41.5%;top:8%;width:17%;height:84%;border-radius:12px}}
@keyframes txt{0%,15%{transform:scale(1)}45%,70%{transform:scale(1.8)}100%{transform:scale(1)}}
···

View Transition뷰 트랜지션

A native browser API that automatically cross-fades or morphs between the "before" and "after" states of a page or DOM change, via document.startViewTransition().

···

Cover transition커버 전환

The new screen slides in on top of the old one, which stays where it is.

···

Shared axis transition공유 축 전환

Two screens swap while moving a short distance along a shared axis (X, Y or Z), showing their spatial or sequential relationship.

···

Morph transition모프 전환

When two slides (or screens) contain matching objects, their position, size and colour are interpolated automatically.

The tapped card (container) **expands its bounds until it becomes the next screen.** Material calls it container transform, Flutter calls it a hero, and on the web it is a shared element transition (the View Transitions API's `view-transition-name`). The App Store "Today" card growing into a full-screen article is the textbook case.

The point is that **what you tapped carries into the next screen**, so users do not have to work out why the screen changed. Closing plays the same path in reverse and the card lands back in its slot.

Elements inside the card (thumbnail, title) should hand over to their counterparts on the next screen while the rest cross-fades. If that handover is off it just reads as a zoom.

When to use

Use it for card or thumbnail lists that open a detail, or a FAB expanding into a compose screen. It needs a tapped element to grow from.

Open as page ↗

Suggest an entry

Tell us about a term, effect or component that’s missing. We read every suggestion.