Reveal transition

리빌 전환

The old screen slides away to uncover the new one already sitting underneath — the inverse of a cover.

Also known as: UncoverSlide away
···
html
<div class="stage"><div class="s b">B</div><div class="s a gone">A</div></div>
css
.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:800 clamp(16px,6vmin,30px)/1 sans-serif;color:#fff;letter-spacing:.04em}
.a{background:linear-gradient(135deg,#3b3b98,#1e1e4a)}
.b{background:linear-gradient(135deg,#f25c8a,#c9184a)}
.gone{animation:reveal 3.6s cubic-bezier(.6,0,.2,1) infinite;box-shadow:0 0 30px rgba(0,0,0,.5)}
@keyframes reveal{0%,20%{transform:translateX(0)}50%,70%{transform:translateX(-100%)}100%{transform:translateX(0)}}

A reveal (or uncover) is where the new screen is **already underneath** and the old one is removed. It is a cover played backwards — the motion you use when dismissing a modal is effectively a reveal. Keynote calls it "Reveal", PowerPoint "Uncover".

Because the new screen has been in place all along, the eye does not have to chase anything; it feels like lifting a lid to find what was there. It matches meanings of **resolution**: close, done, go back.

It looks like a wipe (→ wipe-transition), but a wipe **cuts** the new screen into view along an edge, whereas in a reveal the whole old screen **moves away**.

When to use

Use it for dismissing modals and sheets or returning after a task. Cover to open, reveal to close — they are a pair.

Open as page ↗

Suggest an entry

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