What is a transition in UX design?
A transition is an animation that occurs between two interface states: a screen appearing, an element expanding, a panel sliding in, a card flipping. Transitions communicate change by showing users how the interface moves from one state to another rather than cutting abruptly between them. Well-designed transitions maintain spatial context, communicate the relationship between elements, and help users build an accurate mental model of how the interface is structured. Abrupt state changes without transitions can leave users disoriented about what changed and where the previous content went.
What are the principles of effective transitions?
Transitions should be fast enough to not delay users unnecessarily. Most UI transitions fall between 150 and 400 milliseconds: below 150ms is too fast to register as intentional movement, above 400ms starts to feel slow and impatient. The easing of the transition matters as much as its duration: ease-out curves, which start faster and decelerate, feel more natural than linear motion because they mimic the deceleration of physical objects. Transitions should communicate the spatial relationship between states: a new screen sliding in from the right implies it is further forward in a hierarchy, sliding back out implies returning.
How do transitions relate to motion accessibility?
The same accessibility considerations that apply to motion design broadly apply to transitions. Users with vestibular disorders may experience discomfort from large, fast, or complex animations. The prefers-reduced-motion CSS media query allows these users to signal their preference at the operating system level. Interfaces should respect this preference by reducing or eliminating transitions that involve significant motion while preserving functional state changes through simpler means such as instant appearance or opacity fades that do not involve spatial movement.