Design Atlas
한국어
▶ Motion graphics

Dissolve

디졸브

One scene fades out while the next fades in, overlapping briefly so both are visible at once mid-transition.

Also known as: Cross dissolve크로스 디졸브
···
html
<div class="stage">
  <div class="scene a">SCENE A</div>
  <div class="scene b">SCENE B</div>
</div>
css
.stage{position:absolute;inset:0;overflow:hidden}
.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:800 clamp(16px,6vmin,32px)/1 sans-serif;color:#fff;letter-spacing:.03em}
.a{background:linear-gradient(135deg,#183028,#0b1a16);animation:fade-out 3.4s ease-in-out infinite}
.b{background:linear-gradient(135deg,#3a2a5c,#1d1436);opacity:0;animation:fade-in 3.4s ease-in-out infinite}
@keyframes fade-out{0%,20%{opacity:1}55%{opacity:0}90%{opacity:0}100%{opacity:1}}
@keyframes fade-in{0%,20%{opacity:0}55%{opacity:1}90%{opacity:1}100%{opacity:0}}

The oldest, most common transition there is. Where a hard cut implies "time is continuous," a dissolve implicitly says "time has passed" or "these scenes are connected" — which is why it shows up so often in flashbacks and montages.

In Premiere Pro it's as simple as overlapping two clips on the timeline and dropping in a Cross Dissolve transition. Underneath, it's just clip A's opacity going 100→0 while clip B's goes 0→100 at the same time.

The longer the dissolve, the stronger the "time has passed" feeling gets. A quick 0.5-second dissolve and a slow 3-second one are the same technique but read as completely different statements.

When to use

Don't dissolve between unrelated scenes — viewers unconsciously search for a connection and end up confused when there isn't one.