Feedback

Toast Stack

Three notifications sliding in from the right, one after another.

Export ready

a moment ago

Scene saved

a moment ago

Link copied

a moment ago

Elements

Groups

Hover states

1040ms

Duration

Open this scene in the editor All templates

Why it is timed this way

The reasoning

Thirty milliseconds apart, which is tight enough to read as one stack settling rather than three separate events. Slide without fade keeps them feeling like objects moving in from off-screen instead of appearing out of nothing.

9 elements move, the first at 0ms and the last starting at 240ms — the whole scene settles by 1040ms. Every bar below is one element's animation window.

Toast 1 Dot

Toast 1 Text

Toast 1 Sub

Toast 2 Dot

Toast 2 Text

Toast 2 Sub

Toast 3 Dot

Toast 3 Text

Toast 3 Sub

0ms520ms1040ms

The code

Everything the scene needs, in whichever format you ship. Entrances compile to@keyframesand hover states totransition, with a reduced-motion guard on both.

303 lines

.toasts {
  transform: translate3d(0px, 0px, 0);
  width: 960px;
  height: 480px;
  transform-origin: 188px 124px;
}

.toast-1 {
  transform: translate3d(0px, 0px, 0);
  box-shadow: 0px 10px 30px 0px #00000066;
  height: 40px;
  background: #1f2331;
  border-radius: 18px;
  transform-origin: 160px 40px;
}

.toast-1-copy {
  transform: translate3d(0px, 0px, 0);
  height: 40px;
  transform-origin: 120px 20px;
}

.toast-2 {
  transform: translate3d(0px, 0px, 0);
  box-shadow: 0px 10px 30px 0px #00000066;
  height: 40px;
  background: #1f2331;
  border-radius: 18px;
  transform-origin: 160px 40px;
}

.toast-2-copy {
  transform: translate3d(0px, 0px, 0);
  height: 40px;
  transform-origin: 120px 20px;
}

.toast-3 {
  transform: translate3d(0px, 0px, 0);
  box-shadow: 0px 10px 30px 0px #00000066;
  height: 40px;
  background: #1f2331;
  border-radius: 18px;
  transform-origin: 160px 40px;
}

.toast-3-copy {
  transform: translate3d(0px, 0px, 0);
  height: 40px;
  transform-origin: 120px 20px;
}

.toast-1-dot {
  transform: translate3d(0px, 0px, 0);
  width: 24px;
  height: 24px;
  background: #6366f1;
  border-radius: 999px;
  animation: toast-1-dot-anim 1040ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes toast-1-dot-anim {
  0% {
    transform: translate3d(300px, 0px, 0);
    animation-timing-function: ease-out;
  }
  57.69% {
    transform: translate3d(0px, 0px, 0);
  }
  100% {
    transform: translate3d(0px, 0px, 0);
  }
}

.toast-1-text {
  transform: translate3d(0px, 0px, 0);
  height: 20px;
  background: #00000000;
  color: #eceef4;
  font-size: 15px;
  font-weight: 600;
  animation: toast-1-text-anim 1040ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes toast-1-text-anim {
  0% {
    transform: translate3d(300px, 0px, 0);
  }
  2.88% {
    transform: translate3d(300px, 0px, 0);
    animation-timing-function: ease-out;
  }
  60.58% {
    transform: translate3d(0px, 0px, 0);
  }
  100% {
    transform: translate3d(0px, 0px, 0);
  }
}

.toast-1-sub {
  transform: translate3d(0px, 0px, 0);
  height: 16px;
  background: #00000000;
  color: #4a5164;
  font-size: 12px;
  font-weight: 500;
  animation: toast-1-sub-anim 1040ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes toast-1-sub-anim {
  0% {
    transform: translate3d(300px, 0px, 0);
  }
  5.77% {
    transform: translate3d(300px, 0px, 0);
    animation-timing-function: ease-out;
  }
  63.46% {
    transform: translate3d(0px, 0px, 0);
  }
  100% {
    transform: translate3d(0px, 0px, 0);
  }
}

.toast-2-dot {
  transform: translate3d(0px, 0px, 0);
  width: 24px;
  height: 24px;
  background: #22d3ee;
  border-radius: 999px;
  animation: toast-2-dot-anim 1040ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes toast-2-dot-anim {
  0% {
    transform: translate3d(300px, 0px, 0);
  }
  8.65% {
    transform: translate3d(300px, 0px, 0);
    animation-timing-function: ease-out;
  }
  66.35% {
    transform: translate3d(0px, 0px, 0);
  }
  100% {
    transform: translate3d(0px, 0px, 0);
  }
}

.toast-2-text {
  transform: translate3d(0px, 0px, 0);
  height: 20px;
  background: #00000000;
  color: #eceef4;
  font-size: 15px;
  font-weight: 600;
  animation: toast-2-text-anim 1040ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes toast-2-text-anim {
  0% {
    transform: translate3d(300px, 0px, 0);
  }
  11.54% {
    transform: translate3d(300px, 0px, 0);
    animation-timing-function: ease-out;
  }
  69.23% {
    transform: translate3d(0px, 0px, 0);
  }
  100% {
    transform: translate3d(0px, 0px, 0);
  }
}

.toast-2-sub {
  transform: translate3d(0px, 0px, 0);
  height: 16px;
  background: #00000000;
  color: #4a5164;
  font-size: 12px;
  font-weight: 500;
  animation: toast-2-sub-anim 1040ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes toast-2-sub-anim {
  0% {
    transform: translate3d(300px, 0px, 0);
  }
  14.42% {
    transform: translate3d(300px, 0px, 0);
    animation-timing-function: ease-out;
  }
  72.12% {
    transform: translate3d(0px, 0px, 0);
  }
  100% {
    transform: translate3d(0px, 0px, 0);
  }
}

.toast-3-dot {
  transform: translate3d(0px, 0px, 0);
  width: 24px;
  height: 24px;
  background: #8b7bff;
  border-radius: 999px;
  animation: toast-3-dot-anim 1040ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes toast-3-dot-anim {
  0% {
    transform: translate3d(300px, 0px, 0);
  }
  17.31% {
    transform: translate3d(300px, 0px, 0);
    animation-timing-function: ease-out;
  }
  75% {
    transform: translate3d(0px, 0px, 0);
  }
  100% {
    transform: translate3d(0px, 0px, 0);
  }
}

.toast-3-text {
  transform: translate3d(0px, 0px, 0);
  height: 20px;
  background: #00000000;
  color: #eceef4;
  font-size: 15px;
  font-weight: 600;
  animation: toast-3-text-anim 1040ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes toast-3-text-anim {
  0% {
    transform: translate3d(300px, 0px, 0);
  }
  20.19% {
    transform: translate3d(300px, 0px, 0);
    animation-timing-function: ease-out;
  }
  77.88% {
    transform: translate3d(0px, 0px, 0);
  }
  100% {
    transform: translate3d(0px, 0px, 0);
  }
}

.toast-3-sub {
  transform: translate3d(0px, 0px, 0);
  height: 16px;
  background: #00000000;
  color: #4a5164;
  font-size: 12px;
  font-weight: 500;
  animation: toast-3-sub-anim 1040ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes toast-3-sub-anim {
  0% {
    transform: translate3d(300px, 0px, 0);
  }
  23.08% {
    transform: translate3d(300px, 0px, 0);
    animation-timing-function: ease-out;
  }
  80.77% {
    transform: translate3d(0px, 0px, 0);
  }
  100% {
    transform: translate3d(0px, 0px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast-1-dot,
  .toast-1-text,
  .toast-1-sub,
  .toast-2-dot,
  .toast-2-text,
  .toast-2-sub,
  .toast-3-dot,
  .toast-3-text,
  .toast-3-sub {
    animation: none;
    transition: none;
  }
}