Pop-in
A quick entrance that grows from small, slips just past full size, and settles with a tiny snap.
See it
What it is
A pop-in is a compact entrance: the element begins smaller, scales quickly past its final size, then settles at 100%. Opacity often rises at the same time. That tiny overshoot gives the appearance a physical snap instead of the steady zoom of a normal scale transition.
Reach for it on badges, reactions, confirmation icons, small popovers, and playful controls that deserve a moment of emphasis. The way an iMessage tapback or a Slack emoji reaction lands is the reference everyone already has. Set transform-origin to the point the element seems to emerge from, such as a trigger button or the center of a notification dot.
Gotcha: scaling from zero makes text and icons look rubbery and turns a small accent into a magic trick. Start around 0.8 to 0.9, overshoot only a few percent, and keep the layout box fixed while transform does the visual work. Use a plain fade when reduced motion is requested.
Ask AI for it
Add a CSS pop-in entrance to this badge. Use @keyframes to animate from opacity: 0 and transform: scale(0.84), through scale(1.04) at 70%, to opacity: 1 and scale(1) at 100%. Run it once over 240ms with cubic-bezier(0.22, 1, 0.36, 1), set transform-origin to the badge center, keep its layout dimensions unchanged, and switch to a 120ms opacity-only fade under prefers-reduced-motion.