Motion

The entry reveal, hover timings and reduced motion.

Motion marks an entry or a change of state. Nothing loops on its own, and nothing is hidden until an animation runs. When a visitor asks their system for less motion, every animation and transition is cut to an instant, and hover clips never play.

Entry reveal

Content slides up a few pixels as a page opens. It is the .fade-up class, and --reveal-delay staggers one element after another. The content is visible from the start, so a page still reads if the animation never runs.

First line, no delay

Second line, 120ms later

Third line, 240ms later

Timings

WhereWhat changesDuration
Entry revealSlides up 10 pixels600ms
Card and tile shadowShadow appears on hover400ms
Tile imageFades in once it has loaded450ms
Tile hover clipFades in once it is playing350ms
Tabs, toggles and linksBackground or underline color200ms
Primary button ringRainbow border turns while hovered1s per turn

The button ring is on the Button page.

↑ ↓ to move, Enter to open, Esc to close