Navigation
Navbar Slide Down
A navigation bar that drops into place as one piece, with hover states on the links.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.navbar {
transform: translate3d(0px, 0px, 0);
transform-origin: 240px 160px;
animation: navbar-anim 1200ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes navbar-anim {
0% {
transform: translate3d(0px, -72px, 0);
opacity: 0;
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
26.25% {
transform: translate3d(0px, 4.698px, 0);
opacity: 1;
}
58.33% {
transform: translate3d(0px, 0px, 0);
opacity: 1;
}
100% {
transform: translate3d(0px, 0px, 0);
opacity: 1;
}
}
.nav-bar {
transform: translate3d(-80px, 130px, 0);
width: 640px;
height: 60px;
background: #1c1e2a;
border-radius: 14px;
}
.nav-logo {
transform: translate3d(-60px, 146px, 0);
width: 28px;
height: 28px;
background: #6366f1;
border-radius: 8px;
}
.nav-product {
transform: translate3d(-10px, 146px, 0);
width: 78px;
height: 28px;
background: #00000000;
border-radius: 8px;
color: #8b90a0;
font-size: 13px;
font-weight: 500;
transition: transform 150ms ease-out, color 150ms ease-out;
}
.nav-product:hover {
transform: translate3d(-10px, 145px, 0);
color: #e7e9ee;
}
.nav-docs {
transform: translate3d(74px, 146px, 0);
width: 78px;
height: 28px;
background: #00000000;
border-radius: 8px;
color: #8b90a0;
font-size: 13px;
font-weight: 500;
transition: transform 150ms ease-out, color 150ms ease-out;
}
.nav-docs:hover {
transform: translate3d(74px, 145px, 0);
color: #e7e9ee;
}
.nav-pricing {
transform: translate3d(158px, 146px, 0);
width: 78px;
height: 28px;
background: #00000000;
border-radius: 8px;
color: #8b90a0;
font-size: 13px;
font-weight: 500;
transition: transform 150ms ease-out, color 150ms ease-out;
}
.nav-pricing:hover {
transform: translate3d(158px, 145px, 0);
color: #e7e9ee;
}
.nav-cta {
transform: translate3d(440px, 144px, 0);
width: 100px;
height: 32px;
background: #6366f1;
border-radius: 9px;
color: #ffffff;
font-size: 13px;
font-weight: 600;
transition: transform 160ms ease-out, background 160ms ease-out;
}
.nav-cta:hover {
transform: translate3d(440px, 144px, 0) scale(1.04, 1.04);
background: #7c6cff;
}
.nav-cta:active {
transform: translate3d(440px, 144px, 0) scale(0.97, 0.97);
transition: transform 80ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
.navbar,
.nav-product,
.nav-docs,
.nav-pricing,
.nav-cta {
animation: none;
transition: none;
}
}Why it is built this way
The whole bar animates as a single group rather than each link moving separately — one transform instead of six, and the layout inside stays fixed. The links keep their own hover transitions, which run independently of the entrance.
What it animates
2 properties across 2 CSS declarations. The bar shows when each one is moving.
opacitytransformWhat it costs to run
Opacity 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 5 keyframe stops, with every property moving over the same window.
3 curves in play — Back Out, Ease Out and Linear. 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 1.20s alongside y, and the guard skips all of it together. The generated CSS ends on the resting state, so skipping straight there is safe.