AI CSS Animations

Undo Agent Action Toast

An agent archives a batch of GitHub notification emails, which slide out of the inbox. An Archived 24 emails toast springs up with a draining timer bar, Undo gets pressed and the rows slide back in.

Also known as: undo toast animation, snackbar with undo, ai action undo.

Archived 24 emailsGitHub notifications, 30+ daysRestored 24 emailsBack in your inbox

HTML

<div class="aia-undo-agent-action-toast" role="status" aria-label="Archived 24 emails, with an Undo button">
  <ul class="aia-undo-agent-action-toast-inbox" aria-hidden="true">
    <li><i>P</i><b>Priya Shah</b><span>Launch review Thursday</span></li>
    <li class="aia-undo-agent-action-toast-gone"><i>G</i><b>GitHub</b><span>[acme/web] CI failed on main</span></li>
    <li class="aia-undo-agent-action-toast-gone"><i>G</i><b>GitHub</b><span>Dependabot opened 3 PRs</span></li>
    <li class="aia-undo-agent-action-toast-gone"><i>G</i><b>GitHub</b><span>You were mentioned in #482</span></li>
  </ul>
  <div class="aia-undo-agent-action-toast-toast">
    <span class="aia-undo-agent-action-toast-ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="4" rx="1"/><path d="M5.5 8.5V18a1.5 1.5 0 0 0 1.5 1.5h10a1.5 1.5 0 0 0 1.5-1.5V8.5M10 12.5h4"/></svg><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4.5 9.5 9 5"/><path d="M4.5 9.5H15a4.5 4.5 0 0 1 0 9h-3"/></svg></span>
    <span class="aia-undo-agent-action-toast-msg"><span><b>Archived 24 emails</b>GitHub notifications, 30+ days</span><span><b>Restored 24 emails</b>Back in your inbox</span></span>
    <button type="button" class="aia-undo-agent-action-toast-undo">Undo</button>
    <i class="aia-undo-agent-action-toast-bar" aria-hidden="true"></i>
  </div>
</div>

CSS

.aia-undo-agent-action-toast {
  --c: var(--aia-color, #7c5cff);
  font-size: var(--aia-size, 16px);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.4;
  --d: 9s;
  position: relative;
  width: 22em;
  animation: aia-undo-agent-action-toast-fade var(--d) linear infinite;
}
.aia-undo-agent-action-toast-inbox {
  box-sizing: border-box;
  height: 10.6em;
  margin: 0;
  padding: 0.35em;
  overflow: hidden;
  list-style: none;
  border-radius: 0.9em;
  background: color-mix(in srgb, currentColor 3%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 11%, transparent), 0 0.1em 0.2em color-mix(in srgb, currentColor 4%, transparent), 0 0.9em 2em -1.1em rgb(0 0 0 / 0.3);
}
.aia-undo-agent-action-toast-inbox li {
  display: flex;
  align-items: center;
  gap: 0.55em;
  height: 2.3em;
  padding: 0 0.55em;
  overflow: hidden;
  border-radius: 0.55em;
  font-size: 0.82em;
  white-space: nowrap;
}
.aia-undo-agent-action-toast-inbox li + li { box-shadow: 0 -1px 0 color-mix(in srgb, currentColor 7%, transparent); }
.aia-undo-agent-action-toast-inbox i {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #0ea5e9;
  color: #fff;
  font: normal 700 0.8em system-ui, sans-serif;
}
.aia-undo-agent-action-toast-gone i { background: #3f3f46; }
.aia-undo-agent-action-toast-inbox b {
  width: 5.6em;
  font-weight: 600;
}
.aia-undo-agent-action-toast-inbox span {
  overflow: hidden;
  color: color-mix(in srgb, currentColor 58%, transparent);
  text-overflow: ellipsis;
}
.aia-undo-agent-action-toast-gone {
  animation: aia-undo-agent-action-toast-gone var(--d) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-undo-agent-action-toast-gone:nth-child(3) { animation-delay: 0.08s; }
.aia-undo-agent-action-toast-gone:nth-child(4) { animation-delay: 0.16s; }
.aia-undo-agent-action-toast-toast {
  position: absolute;
  left: 0.7em;
  right: 0.7em;
  bottom: 0.7em;
  display: flex;
  align-items: center;
  gap: 0.6em;
  overflow: hidden;
  padding: 0.6em 0.6em 0.7em 0.7em;
  border-radius: 0.75em;
  background: color-mix(in srgb, var(--c) 6%, #18181b);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 1em 2em -0.8em rgb(0 0 0 / 0.6);
  color: #f4f4f5;
  animation: aia-undo-agent-action-toast-toast var(--d) cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
}
.aia-undo-agent-action-toast-ic {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 0.55em;
  background: rgb(255 255 255 / 0.1);
}
.aia-undo-agent-action-toast-ic svg {
  grid-area: 1 / 1;
  width: 1.05em;
  height: 1.05em;
  animation: aia-undo-agent-action-toast-a var(--d) ease infinite;
}
.aia-undo-agent-action-toast-ic svg + svg {
  color: #4ade80;
  animation-name: aia-undo-agent-action-toast-b;
}
.aia-undo-agent-action-toast-msg {
  display: grid;
  margin-right: auto;
}
.aia-undo-agent-action-toast-msg > span {
  grid-area: 1 / 1;
  display: grid;
  color: rgb(255 255 255 / 0.55);
  font-size: 0.7em;
  white-space: nowrap;
  animation: aia-undo-agent-action-toast-a var(--d) ease infinite;
}
.aia-undo-agent-action-toast-msg > span + span { animation-name: aia-undo-agent-action-toast-b; }
.aia-undo-agent-action-toast-msg b {
  color: #fff;
  font-size: 1.18em;
  font-weight: 600;
}
.aia-undo-agent-action-toast-undo {
  padding: 0.45em 0.8em;
  border: 0;
  border-radius: 0.5em;
  background: rgb(255 255 255 / 0.1);
  color: color-mix(in srgb, var(--c) 45%, #fff);
  font: 650 0.78em system-ui, sans-serif;
  cursor: pointer;
  animation: aia-undo-agent-action-toast-press var(--d) ease infinite;
}
.aia-undo-agent-action-toast-undo:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.aia-undo-agent-action-toast-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.16em;
  background: var(--c);
  transform-origin: left;
  animation: aia-undo-agent-action-toast-drain var(--d) linear infinite;
}
@keyframes aia-undo-agent-action-toast-gone {
  0%, 8% { height: 2.3em; opacity: 1; transform: none; }
  13% { height: 2.3em; opacity: 0; transform: translateX(-40%); }
  17%, 72% { height: 0; opacity: 0; transform: translateX(-40%); }
  77% { height: 2.3em; opacity: 0; transform: translateX(-20%); }
  82%, 100% { height: 2.3em; opacity: 1; transform: none; }
}
@keyframes aia-undo-agent-action-toast-toast {
  0%, 16% { opacity: 0; transform: translateY(1.2em) scale(0.94); }
  21%, 84% { opacity: 1; transform: none; }
  89%, 100% { opacity: 0; transform: translateY(1.2em) scale(0.94); }
}
@keyframes aia-undo-agent-action-toast-a {
  0%, 66% { opacity: 1; transform: none; }
  70%, 100% { opacity: 0; transform: translateY(-0.6em); }
}
@keyframes aia-undo-agent-action-toast-b {
  0%, 67% { opacity: 0; transform: translateY(0.6em); }
  71%, 100% { opacity: 1; transform: none; }
}
@keyframes aia-undo-agent-action-toast-press {
  0%, 63% { transform: none; background: rgb(255 255 255 / 0.1); }
  65% { transform: scale(0.9); background: color-mix(in srgb, var(--c) 45%, transparent); }
  68% { transform: none; background: color-mix(in srgb, var(--c) 30%, transparent); }
  72%, 100% { transform: none; background: rgb(255 255 255 / 0.1); opacity: 0.4; }
}
@keyframes aia-undo-agent-action-toast-drain {
  0%, 20% { transform: scaleX(1); opacity: 1; }
  65% { transform: scaleX(0.42); opacity: 1; }
  69%, 100% { transform: scaleX(0.42); opacity: 0; }
}
@keyframes aia-undo-agent-action-toast-fade {
  0%, 94% { opacity: 1; }
  98%, 99% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-undo-agent-action-toast,
  .aia-undo-agent-action-toast-gone,
  .aia-undo-agent-action-toast-toast,
  .aia-undo-agent-action-toast-ic svg,
  .aia-undo-agent-action-toast-msg > span,
  .aia-undo-agent-action-toast-undo,
  .aia-undo-agent-action-toast-bar {
    animation-play-state: paused;
    animation-delay: calc(var(--d) * -0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aia-undo-agent-action-toast, .aia-undo-agent-action-toast *, .aia-undo-agent-action-toast::before, .aia-undo-agent-action-toast::after, .aia-undo-agent-action-toast *::before, .aia-undo-agent-action-toast *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --aia-color on the element or a parent. Currently previewing #3b82f6.
  • Base size: set --aia-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar ai animations

Agent Tool Call Card
Agent Terminal Output
Agent File Edit Diff
Agent Plan Checklist