Motion, transitions and micro-interactions

Good motion tells people what changed, where something came from, where it went and whether their action worked. When it does none of those, it is decoration, and decoration in an interface usually costs more than it gives: it slows people down, distracts them and can make some of them feel unwell.

A design system treats motion like colour or spacing. It names a small set of durations and curves, explains when to use each, and makes sure every animated component respects the user’s preference for less movement.

What motion is for

A useful test: remove the animation and see whether anything becomes harder to understand. If nothing does, the motion was probably decoration.

Transition, animation, micro-interaction

• Transition: a change from one state to another, such as a background colour on hover or a page change.
• Animation: time-based motion that runs on its own, such as a loading spinner or an illustration in onboarding.
• Micro-interaction: one small moment built around a single task, such as liking a post, toggling a setting or copying a value to the clipboard.

The four parts of a micro-interaction

Dan Saffer’s book Microinteractions breaks every one of these moments into four parts. Writing each part down turns a vague “make it feel nice” into something a developer can build.

1. 01Trigger. What starts it: a user action such as a click, or a system event such as a new message arriving.
2. 02Rules. What happens, in what order, and when it ends.
3. 03Feedback. What the person sees, hears or feels while it happens.
4. 04Loops and modes. What happens when it repeats, and whether it changes over time or in another context.

Copy connection string

Trigger   Click, or Enter while the button has focus
Rules     Copy the value to the clipboard, reset after about 2 seconds
Feedback  Copy icon swaps to a check, label reads "Copied",
          screen readers hear the same message
Loop      Clicking again copies again and restarts the timer

Duration tokens

Most interface motion is short. The ranges below are common starting points across public systems, not fixed rules. Name them as tokens so every component draws from the same few values.

• The larger the element and the further it travels, the longer the motion can be.
• Interface motion rarely needs more than about half a second. Longer than that, and people start waiting for it.
• Exits can be a little quicker than entrances: once someone has dismissed something, they want it gone.

Easing: how motion feels

Easing describes how speed changes over the course of a movement. Real objects don’t start or stop instantly, so motion with no easing tends to feel mechanical.

A few of the classic animation principles carry over well: slow in and slow out (easing), anticipation (a small cue before an action), follow-through (a slight settle after stopping) and staging (one thing moves at a time, so the eye knows where to look). Interfaces add one of their own: staggering, where list items arrive a few tens of milliseconds apart instead of all at once.

Motion in Figma and in handoff

• Smart Animate animates position, size, opacity and rotation between two frames when layers share a name.
• Interactive components can carry hover and press transitions, so prototypes behave like the real component.
• Easing presets, custom bezier curves and spring presets are available on every transition.
• For more detailed motion, teams use tools such as ProtoPie or Rive, or export After Effects animation to Lottie.

A prototype shows the feel, but a developer needs numbers. For each animated change, write down the property, from and to values, duration, easing, delay and trigger, using token names where they exist.

The same ideas in CSS

:root {
  --motion-fast: 150ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

.button {
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}
.button:active { transform: scale(0.97); }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.toast { animation: fade-in-up 200ms var(--ease-out); }

Reduced motion is not optional

Some people get dizzy or nauseous from large movement on screen, and many turn on a “reduce motion” setting in their operating system. CSS exposes that choice as the prefers-reduced-motion media query. Build it into the system once, so every component honours it.

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

Keep it smooth

Browsers can animate transform and opacity cheaply, often without recalculating the page layout. Animating width, height, top or left forces layout work on every frame and is a common cause of stutter, especially on slower phones. When a design calls for something to grow or move, ask whether a transform can produce the same effect.

Next in the series

Motion specs land in CSS, and so does almost every other design decision. Part 11 covers how much HTML, CSS and JavaScript a designer needs: semantic markup, modern layout, container queries and the UI states that code reveals.