Nine rules for motion that works
The interactive page lets you feel them; this is the reference, each paired with how it lands in code.
Purpose
Every animation should orient, explain or confirm. If it does none of those, it's noise — cut it. Motion is a cost the user pays in time and attention.
/* if it doesn't aid the
user, don't animate it */Easing
Real things accelerate and settle. Use ease-out for entrances, ease-in for exits, and reserve linear for things that genuinely move at constant speed (spinners, marquees).
transition: transform .3s
cubic-bezier(.16,1,.3,1);Timing
Keep it short — most UI transitions sit between 150 and 500ms. Scale duration to distance and size: a tooltip is quick, a full-screen panel is slower.
--dur-sm: 150ms;
--dur-md: 300ms;
--dur-lg: 500ms;Choreography
Sequence related elements with a small offset rather than moving everything at once. Stagger guides the eye and makes a busy change legible.
animation-delay:
calc(var(--i) * 60ms);Continuity
Preserve object identity across states. When one element becomes another, animate the transformation in place so the user can follow what turned into what.
/* shared-element transition */
@view-transition { navigation: auto; }Feedback
Motion confirms an action was received and shows the system responding — a press that depresses, a result that arrives. Immediate, then out of the way.
button:active {
transform: scale(.97);
}Orientation
Where a thing enters from implies where it belongs and where it'll return. Direction and origin carry meaning — a drawer slides from the edge it lives on.
/* enter from the panel's
home edge, not nowhere */Performance
Animate only the cheap properties — transform and opacity — so the GPU can hold 60fps. Animating layout (width, top, margin) drops frames and feels broken.
/* compositor-friendly */
transform / opacity ✓
width / top / margin ✗Accessibility
Large motion can trigger nausea and migraines. Always honour the reduced-motion setting — remove or replace movement with a fade, never just ignore it.
@media (prefers-reduced-motion:
reduce) { * { animation: none;
transition: none; } }Sensible starting values
A small, opinionated set of motion tokens. Reach for these, then deviate on purpose.
Worth reading
Foundational
The Illusion of Life: Disney Animation
The origin of the twelve basic principles of animation — squash & stretch, anticipation, follow-through, slow in/out. Most interface-motion thinking still traces back to these.
Creating Usability with Motion: The UX in Motion Manifesto
The bridge from Disney to the interface — twelve principles framed around usability: how motion supports expectation, continuity, narrative and relationship.
medium.com/ux-in-motion →Books
Designing Interface Animation
The practitioner's handbook: meaningful motion for feedback, orientation and brand — including a clear-eyed chapter on accessibility and motion sensitivity.
valhead.com/books →Animation at Work
Starts with the science of human perception, then turns it into patterns, an anatomy of web animation, and how to communicate motion across a team.
abookapart.com →System guides
Material 3 — Motion
A complete motion system: easing and duration tokens, transition patterns, and Google's case for why motion should carry meaning, worked through real components.
m3.material.io →Human Interface Guidelines — Motion
How a platform uses motion for hierarchy and vitality while deferring to content — and how it respects the system Reduce Motion setting.
developer.apple.com →Accessibility
prefers-reduced-motion
The media feature reference and patterns — including the no-motion-first approach of styling statically, then adding motion under no-preference.
Using prefers-reduced-motion (C39)
The official technique for WCAG Success Criterion 2.3.3, Animation from Interactions — how to suppress motion triggered by interaction.
w3.org/WAI →