Motion can connect one state with another and draw attention to a meaningful update. It can also distract from reading or make an interface less comfortable for someone who prefers reduced movement.

Name the purpose of the animation before choosing its effect. A transition that clarifies a panel opening has a different role from continuous decoration. Provide a reduced-motion experience and keep essential information available without movement.

Try the task with the animation simplified or removed. If the action becomes impossible to understand, another signal may be needed. Useful motion adds clarity while the underlying interface remains complete.

A few starting points
  1. Name what the motion explains.
  2. Respect reduced-motion preferences.
  3. Keep information clear without animation.

Picture this situation.

Consider the same interface with motion reduced. The task should remain understandable when the visual transition is shortened or absent.

A second way to look.

Consistency is valuable where it carries learned meaning. Keep familiar behavior dependable while allowing different tasks to have the structure they need.

Follow a related question

Distinguish reference material from active work.

An archive that explains itself

Name the page’s essential task.

A useful first version of a page

Keep learning

Related background to continue exploring this subject.

W3C: web accessibility W3C: accessible image tutorials
Look a little closer