Intro · CSS only· 7 sites
Measured in the library
Each value is a
cubic-bezier fitted frame by frame to a site's 30 fps intro capture. Range 235–325 ms, median
274 ms over 6.
median 274 ms 230 ms285 ms340 ms 6 intro reveals between 230 ms and 340 ms. Press a dot to replay the demo on that site's curve. Pro names the 3 hollow dots
How it works
The page's first elements fade and rise into place in about 300 ms, on a curve measured on real sites.In 6 steps.
The calm sites in the library introduce their first screen the same way: each element fades in and rises a few pixels, on an ease-out curve, done in roughly a third of a second, with a small stagger. Measured frame by frame from their 30 fps intro clips, the fast ones cluster tightly, and that cluster is this technique. It is plain CSS: one keyframe, four custom properties.
- 01
One keyframe, from invisible and lower
@keyframes reveal-rise { from { opacity: 0; translate: 0 12px } }. Only the start is declared, so each element ends exactly where its layout puts it.
- 02
Fill mode `both`
The element holds its first frame during its delay, so nothing flashes in before its turn and nothing is hidden by JavaScript.
- 03
An ease-out curve
Fast at the start, settling at the end: motion that starts at once feels responsive. ease-out (cubic-bezier(0, 0, 0.58, 1)) is what most of the measured sites use.
- 04
Short
Around 300 ms, so the page is readable almost immediately; longer reads as a loading screen.
- 05
A small stagger
Each child starts a few tens of milliseconds after the previous one (--i × --reveal-stagger), top to bottom, so the eye is led rather than flooded.
- 06
Travel only a little
A 10–16 px rise is enough to read as motion; large distances look like a slide.