Entrances
Back In Down Animation
Drops in from above, overshoots, then settles.
Card title
Supporting copy goes here.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.back-in-down {
transform: translate3d(130px, 90px, 0);
box-shadow: 0px 10px 30px 0px #00000059;
width: 220px;
height: 140px;
background: #1c1e2a;
border-radius: 18px;
color: #e7e9ee;
font-size: 14px;
animation: back-in-down-anim 800ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes back-in-down-anim {
0% {
transform: translate3d(130px, -150px, 0) scale(0.7, 0.7);
opacity: 0.4;
animation-timing-function: ease-out;
}
80% {
transform: translate3d(130px, 101.148px, 0) scale(1.014, 1.014);
opacity: 1;
}
100% {
transform: translate3d(130px, 90px, 0);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.back-in-down {
animation: none;
transition: none;
}
}Why it is built this way
The overshoot comes from a cubic-bezier whose second control point goes past one, not from extra keyframes. That is the cheapest way to get anticipation into an entrance while keeping the CSS short.
What it animates
4 properties across 2 CSS declarations. The bar shows when each one is moving.
opacitytransformtransformtransformWhat it costs to run
Opacity, scale x, scale y and 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.80s across 9 keyframe stops, with every property moving over the same window.
3 curves in play — Ease Out, Linear and Back Out on a card. Different properties easing differently is how a movement gets texture: the eye reads the mismatch as weight rather than as a mistake.
Accessibility
Nothing here hides content — opacity, scale x, scale y and y move over 0.80s and the element is visible throughout. The exported prefers-reduced-motion guard still silences it, which matters most for the looping ones: motion that never stops is the kind that makes people feel unwell.