Entrances
Pop In Animation
Scales up from small with a slight overshoot.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.pop-in {
transform: translate3d(165px, 137px, 0);
width: 150px;
height: 46px;
background: #6366f1;
border-radius: 999px;
color: #ffffff;
font-size: 15px;
font-weight: 600;
animation: pop-in-anim 500ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes pop-in-anim {
0% {
transform: translate3d(165px, 137px, 0) scale(0, 0);
opacity: 0;
animation-timing-function: ease-out;
}
40% {
transform: translate3d(165px, 137px, 0) scale(1.029, 1.029);
opacity: 1;
}
100% {
transform: translate3d(165px, 137px, 0);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.pop-in {
animation: none;
transition: none;
}
}Why it is built this way
Scaling from zero looks broken because the element is briefly invisible and then snaps. Starting nearer full size — around eighty percent — and overshooting slightly gives the same energy without the flicker.
What it animates
3 properties across 2 CSS declarations. The bar shows when each one is moving.
opacitytransformtransformWhat it costs to run
Opacity, scale x and scale y are handled by the compositor: no layout, no repaint, and the work can run off the main thread. This is the cheap end of CSS animation, which is why it stays smooth on a slow phone where other properties will not.
It runs for 0.50s across 7 keyframe stops, with every property moving over the same window.
3 curves in play — Ease Out, Linear and Back Out on a button. Different properties easing differently is how a movement gets texture: the eye reads the mismatch as weight rather than as a mistake.
Accessibility
Starting at opacity 0 makes the reduced-motion guard load-bearing rather than polite: strip it and a reader who asked for less movement gets no content at all, because nothing ever fades it in. It fades over 0.50s alongside scale x and scale y, and the guard skips all of it together. The generated CSS ends on the resting state, so skipping straight there is safe.