Motion, and the people it makes ill

Motion is the loudest channel you have

From the first block: peripheral motion detection is involuntary. A moving element does not compete for attention with size and contrast; it overrides them. That makes motion powerful and makes it the channel most easily misused.

Used well, motion does three specific jobs:

• Continuity. Showing that this panel came from that button, so the user does not have to re-orient.
• Feedback. Confirming that a tap registered.
• Direction. Indicating that content came from the right, so going back means going left.

Anything else is decoration, and decoration in the most intrusive channel available is a poor trade.

The durations

Working numbers, which are consistent across the major platform guidelines:

100-150ms   a small local change: hover, a checkbox, a colour shift
200-250ms   an element entering or leaving: a menu, a tooltip
250-350ms   a panel or sheet crossing much of the screen
300-400ms   a full-screen transition

Beyond about 500 milliseconds an animation stops feeling responsive and starts feeling like a wait. The most common mistake in first attempts is a 1-second transition, which looks impressive once and is infuriating on the fiftieth use.

Distance scales duration. A thing moving 40 pixels should take less time than a thing moving 400. Using one duration for everything makes short movements feel sluggish and long ones feel rushed.

Easing

Linear motion looks mechanical because nothing in the physical world starts and stops instantly.

• Ease-out for things entering: fast at first, settling at the end. This is the default for most interface motion, because the user sees the result quickly and the settle feels natural.
• Ease-in for things leaving: slow start, accelerating away.
• Ease-in-out for things moving from one place to another on screen.
• Linear only for continuous motion with no start or end — a spinner, a progress bar.

.panel { transition: transform 250ms cubic-bezier(0.2, 0, 0, 1); }

That curve is a strong ease-out: quick departure, long gentle settle. It is a good default and worth keeping as a token rather than retyping.

Reduced motion is a medical accommodation

This is the part that matters most and is understood least. Large-scale motion — parallax, zooming transitions, content sliding across the whole screen, autoplaying video — can trigger genuine symptoms in people with vestibular disorders: dizziness, nausea, disorientation lasting well beyond the animation. This is not a preference about taste.

Operating systems expose the user's setting and CSS reads it:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

That blanket rule is a reasonable safety net and a crude one. The better version is to keep the transition and change its nature: replace movement with a fade. A panel that fades in rather than sliding in still communicates that something appeared, still provides feedback, and does not move across the visual field. Reduced motion means less movement, not no change.

The worst offenders, in order: full-page parallax scrolling, transitions that scale an element across most of the screen, and automatically playing background video.

Anything that moves for more than five seconds needs a stop

WCAG 2.2.2 requires that any moving, blinking or scrolling content that starts automatically and lasts more than five seconds can be paused, stopped or hidden by the user.

That covers carousels, autoplaying video, animated backgrounds and marquee text. It is a requirement rather than a suggestion, it is frequently ignored, and the control is usually a single button.

The related point from the emphasis block: an autoplaying carousel is usually a symptom of an unresolved argument about what should be first, expressed as motion. Solving the argument removes the accessibility problem at the same time.

A test

Turn reduced motion on in your own operating system and use your product. Android: Settings > Accessibility > Remove animations. iOS: Settings > Accessibility > Motion > Reduce Motion. macOS: System Settings > Accessibility > Display > Reduce motion. Windows: Settings > Accessibility > Visual effects > Animation effects.

If the product becomes unusable — panels appearing with no indication, states changing with no feedback — then the motion was carrying information that nothing else carried, which is the same colour-alone failure in a different channel.