AI CSS Animations

Agent Clarifying Question

Claude stops to ask where login sessions should live. The question blurs in, three answer tiles spring up with number keys, then the card waits with a breathing ring and bouncing dots.

Also known as: ai asks a question ui, clarifying question card, multiple choice question from agent.

Claude has a question

Where should login sessions be stored?

HTML

<div class="aia-agent-asks-question" role="status" aria-live="polite" aria-label="Claude asks where login sessions should be stored">
  <div class="aia-agent-asks-question-head">
    <span class="aia-agent-asks-question-avatar" 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"><path d="M12 3.5l1.9 5.1 5.1 1.9-5.1 1.9L12 17.5l-1.9-5.1L5 10.5l5.1-1.9z"/></svg></span>
    <span class="aia-agent-asks-question-who">Claude has a question</span>
    <span class="aia-agent-asks-question-wait" aria-hidden="true">Waiting for you<i></i><i></i><i></i></span>
  </div>
  <p class="aia-agent-asks-question-q">Where should login sessions be stored?</p>
  <div class="aia-agent-asks-question-opts">
    <button type="button"><kbd aria-hidden="true">1</kbd><b>Postgres</b><span>Already running locally</span></button>
    <button type="button"><kbd aria-hidden="true">2</kbd><b>Redis</b><span>24h TTL, new service</span></button>
    <button type="button"><kbd aria-hidden="true">3</kbd><b>In memory</b><span>Lost on restart</span></button>
  </div>
  <p class="aia-agent-asks-question-other" aria-hidden="true"><i></i>Or type your own answer</p>
</div>

CSS

.aia-agent-asks-question {
  --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;
  position: relative;
  box-sizing: border-box;
  padding: 0.9em 1em;
  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);
  --d: 8s;
  width: 22em;
  padding: 0.85em 0.95em 0.8em;
  animation: aia-agent-asks-question-attn 2.4s ease-in-out infinite;
}
.aia-agent-asks-question-head {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.8em;
}
.aia-agent-asks-question-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 0.6em;
  background: var(--c);
  color: #fff;
}
.aia-agent-asks-question-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: aia-agent-asks-question-halo 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.aia-agent-asks-question-avatar svg {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
  stroke: none;
}
.aia-agent-asks-question-who {
  margin-right: auto;
  font-weight: 600;
}
.aia-agent-asks-question-wait {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  color: color-mix(in srgb, currentColor 50%, transparent);
  font-size: 0.92em;
}
.aia-agent-asks-question-wait i {
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--c);
  animation: aia-agent-asks-question-dot 1.2s ease-in-out infinite;
}
.aia-agent-asks-question-wait i:first-of-type { margin-left: 0.25em; }
.aia-agent-asks-question-wait i:nth-of-type(2) { animation-delay: 0.15s; }
.aia-agent-asks-question-wait i:nth-of-type(3) { animation-delay: 0.3s; }
.aia-agent-asks-question-q {
  margin: 0.6em 0 0.65em;
  font-size: 0.95em;
  font-weight: 600;
  animation: aia-agent-asks-question-q var(--d) cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
.aia-agent-asks-question-opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45em;
}
.aia-agent-asks-question-opts button {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.2em;
  padding: 0.55em 0.6em 0.6em;
  border: 0;
  border-radius: 0.6em;
  background: color-mix(in srgb, currentColor 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 13%, transparent);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  animation: aia-agent-asks-question-pop1 var(--d) cubic-bezier(0.34, 1.5, 0.64, 1) infinite;
}
.aia-agent-asks-question-opts button:nth-child(2) { animation-name: aia-agent-asks-question-pop2; }
.aia-agent-asks-question-opts button:nth-child(3) { animation-name: aia-agent-asks-question-pop3; }
.aia-agent-asks-question-opts button:first-child {
  background: color-mix(in srgb, var(--c) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent);
}
.aia-agent-asks-question-opts button:hover { box-shadow: inset 0 0 0 1px var(--c); }
.aia-agent-asks-question-opts button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.aia-agent-asks-question-opts kbd {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.35em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
  color: color-mix(in srgb, currentColor 50%, transparent);
  font: 600 0.62em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-agent-asks-question-opts b { font-size: 0.8em; }
.aia-agent-asks-question-opts span {
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 0.66em;
  line-height: 1.3;
}
.aia-agent-asks-question-other {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.6em 0 0;
  padding: 0.5em 0.7em;
  border-radius: 0.55em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent);
  color: color-mix(in srgb, currentColor 42%, transparent);
  font-size: 0.74em;
  animation: aia-agent-asks-question-q var(--d) cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
.aia-agent-asks-question-other i {
  width: 0.1em;
  height: 1.1em;
  background: var(--c);
  animation: aia-agent-asks-question-blink 1s steps(1) infinite;
}
@keyframes aia-agent-asks-question-attn {
  0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 11%, transparent), 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent), 0 0.9em 2em -1.1em rgb(0 0 0 / 0.3); }
  50% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 0 0 0.3em color-mix(in srgb, var(--c) 14%, transparent), 0 0.9em 2em -1.1em rgb(0 0 0 / 0.3); }
}
@keyframes aia-agent-asks-question-halo {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.6em color-mix(in srgb, var(--c) 0%, transparent); }
}
@keyframes aia-agent-asks-question-dot {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30% { opacity: 1; transform: translateY(-0.25em); }
}
@keyframes aia-agent-asks-question-q {
  0% { opacity: 0; filter: blur(0.2em); transform: translateY(0.3em); }
  8%, 94% { opacity: 1; filter: blur(0); transform: none; }
  97%, 100% { opacity: 0; filter: blur(0.1em); transform: none; }
}
@keyframes aia-agent-asks-question-pop1 {
  0%, 6% { opacity: 0; transform: translateY(0.6em) scale(0.92); }
  14%, 94% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}
@keyframes aia-agent-asks-question-pop2 {
  0%, 9% { opacity: 0; transform: translateY(0.6em) scale(0.92); }
  17%, 94% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}
@keyframes aia-agent-asks-question-pop3 {
  0%, 12% { opacity: 0; transform: translateY(0.6em) scale(0.92); }
  20%, 94% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}
@keyframes aia-agent-asks-question-blink {
  0%, 50% { visibility: visible; }
  51%, 100% { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-agent-asks-question,
  .aia-agent-asks-question * {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aia-agent-asks-question, .aia-agent-asks-question *, .aia-agent-asks-question::before, .aia-agent-asks-question::after, .aia-agent-asks-question *::before, .aia-agent-asks-question *::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