Animated Chip Pop-in

<div class="nuda-chip-pop">
  <span class="nuda-chip-pop__chip" style="animation-delay:0s">alpha</span>
  <span class="nuda-chip-pop__chip" style="animation-delay:.15s">beta</span>
  <span class="nuda-chip-pop__chip" style="animation-delay:.3s">gamma</span>
  <span class="nuda-chip-pop__chip" style="animation-delay:.45s">delta</span>
  <span class="nuda-chip-pop__chip" style="animation-delay:.6s">epsilon</span>
</div>

/* Animated Chip Pop-in
   Springy scale/fade-in for newly added chips.
   Customize: --pop-duration, --pop-easing */

.nuda-chip-pop {
  --pop-duration: 0.35s;
  --pop-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nuda-chip-pop__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font: 500 12px/1 ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  background: #111114;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  opacity: 0;
  transform: scale(0.4);
  animation: nuda-chip-pop var(--pop-duration) var(--pop-easing) forwards;
}

@keyframes nuda-chip-pop {
  0%   { opacity: 0; transform: scale(0.4) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-chip-pop__chip {
    animation: none;
    opacity: 1;
    transform: none;
  }
}