Elements that grow into view. The default scale-in is subtle (90% → 100%), scale-in-up adds a slight upward motion, and scale-in-center pops from zero for tooltips and notifications.

Toast notification with Tailwind

<div class="animate-scale-in-center fixed bottom-6 right-6 z-50
            flex items-center gap-3 rounded-xl bg-zinc-900
            border border-white/10 px-5 py-3.5 shadow-2xl"
     style="transform-origin: bottom right">
  <div class="w-2 h-2 rounded-full bg-emerald-400"></div>
  <p class="text-sm text-white">Changes saved successfully.</p>
  <button class="ml-3 text-xs text-white/40 hover:text-white
                 transition-colors">Dismiss</button>
</div>

Tooltip pattern

<div class="animate-scale-in-center rounded-lg bg-zinc-800
            border border-white/10 px-3 py-2 text-xs text-white
            shadow-lg" style="transform-origin: bottom center">
  Copy to clipboard
</div>