Navigation
Dropdown Menu Animation
A dropdown that drops and fades in from just under its trigger.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.dropdown {
transform: translate3d(140px, 85px, 0);
box-shadow: 0px 12px 32px 0px #00000070;
width: 200px;
height: 150px;
background: #1c1e2a;
border-radius: 14px;
color: #e7e9ee;
font-size: 13px;
animation: dropdown-anim 1200ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes dropdown-anim {
0% {
transform: translate3d(140px, 75px, 0) scale(1, 0.94);
opacity: 0;
animation-timing-function: ease-out;
}
18.33% {
transform: translate3d(140px, 85px, 0);
opacity: 1;
}
100% {
transform: translate3d(140px, 85px, 0);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.dropdown {
animation: none;
transition: none;
}
}Why it is built this way
Short is the point — around 200ms. Menus are opened deliberately, and anything slower feels like the interface is arguing with you. The slight downward offset gives it a sense of origin without a full slide.
What it animates
3 properties across 2 CSS declarations. The bar shows when each one is moving.
opacitytransformtransformWhat it costs to run
Opacity, 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 1.20s across 6 keyframe stops, with every property moving over the same window.
One curve throughout: Ease Out on a card. Keeping a single easing across every property is what makes a multi-property animation read as one movement rather than several things happening at once.
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 1.20s alongside scale y and y, and the guard skips all of it together. The generated CSS ends on the resting state, so skipping straight there is safe.