A button that dips slightly when you press it. A menu that slides out from the icon you tapped, so you know where it came from and how to close it. These are micro-interactions: small moments of feedback that, done well, nobody consciously notices. The website just feels responsive and trustworthy.
Done badly, motion is the first thing people notice: headings that fly in as you scroll, a preloader between you and the content, a carousel that won’t sit still while you read. It slows the page, distracts from the message and can make some visitors feel physically unwell.
Below: the jobs motion should do, how to keep it fast and accessible, and a checklist for your next design review.
What are micro-interactions?
Micro-interactions are small, self-contained moments built around a single task: pressing a button, switching a setting, submitting a form, copying a link. Each one gives the visitor feedback on what they just did or what is happening now.
Designer Dan Saffer’s book Microinteractions breaks them into four parts, which make a far better brief than “make the button feel nice”:
| Part | What it is | Example: an enquiry form’s Send button |
|---|---|---|
| Trigger | What starts it | The visitor presses Send |
| Rules | What happens, in what order | Check the fields, send the data, block a second submission |
| Feedback | How the visitor knows | The button shows it’s working, then a confirmation appears |
| Loops and modes | Repeats, time limits, alternative states | If sending fails, it explains and offers a retry, not an endless spinner |
Motion design for websites is the broader discipline of how things move between states and pages. Not every micro-interaction needs movement (“Send” becoming “Sent” is feedback too); the two meet wherever movement explains what just happened.
The four jobs motion should do
Before approving any animation, ask which job it does.
1. Confirm an action
A pressed state, a tick when a file uploads, a counter that updates. Without that confirmation, people press again, which is how forms get submitted twice.
2. Show state
Is the menu open, the section expanded, the page still loading? A rotating chevron on an accordion shows state at a glance; a moving progress bar says the page hasn’t frozen.
3. Orient the visitor
A panel that slides in from the side it was opened on, or a thumbnail that expands into a larger view, shows where things came from and went.
4. Direct attention
The eye is drawn to movement, so spend it carefully. A new error message or an item landing in a basket can earn a brief movement. If five things move at once, none of them stands out.
Anything else is decoration and must justify its cost in speed, battery and attention. Purposeful motion is one mark of premium website design; motion for its own sake reads as a template.
Where small touches matter most: the end of the journey
Most animation effort goes on the homepage hero, yet the moments after the main action often matter more.
Psychologist Daniel Kahneman and colleagues described the peak-end rule: people judge an experience largely by its most intense moment and its end, rather than the average. On a business website, the peak is often friction, such as a form error, and the end a confirmation page: on many sites, the least designed screens of all.
The confirmation
When someone presses Send, change the button at once to show it’s working, then confirm in text that the enquiry arrived and what happens next. A small animated tick makes a pleasant, on-brand full stop, as long as the words do the real work. Our guide to web form design covers the rest.
The error
A gentle, one-off movement can draw the eye to a field that needs fixing, but the message must be text beside the field. A shake means nothing to a screen reader user or anyone who looked away. Accessible web forms explains how to announce errors properly.
The 404 page
A line in your brand’s voice, a search box and links to your main sections turn a dead end into a short detour. Heavy animation only slows a page whose job is to send people elsewhere.
Touches, not gimmicks or dark patterns
The same psychology powers manipulative patterns, such as countdown timers that reset on reload or pop-ups that slide in as someone starts reading. They may lift a short-term number, but they erode trust.
Duration, easing and restraint
Good motion is quick enough that nobody waits and slow enough to be understood. Jakob Nielsen’s response-time limits are a useful anchor: about 0.1 second feels instant; beyond about one second, a delay starts to break someone’s flow of thought.
These are common starting points, not standards:
| Kind of motion | Starting point | Why |
|---|---|---|
| Press and hover feedback | 100 ms or less | It should feel instant |
| Toggles, accordions, tooltips | Roughly 150–250 ms | Visible, but not noticed |
| Menus, side panels, dialogs | Roughly 250–400 ms | Further to travel |
| Page or view transitions | As short as reads clearly | Visitors are waiting for content |
Easing
Constant speed looks mechanical, because real objects don’t start or stop instantly:
- Ease-out (fast start, gentle stop) for things entering or responding.
- Ease-in for things leaving.
- Ease-in-out for things moving from one place on screen to another.
- Linear only for continuous motion, such as a spinner.
Bounces and springs are a matter of brand temperament; a calm brand rarely needs them, as our website branding guide explains.
Restraint
- Nothing blocks the visitor. No intros, preloaders or transitions people must sit through.
- Exits are faster than entrances, and text being read stays still.
- One motion language. Define a few durations and easing curves once, as design tokens, so every component moves the same way: an easy win from a design system.
- Page builder effects are used sparingly. In WordPress page builders, an entrance animation is a one-click setting per element, which is how every heading ends up sliding in.
Web animation best practices for speed
Motion touches all three Core Web Vitals. Google rates a page as good when Largest Contentful Paint is 2.5 seconds or less, Interaction to Next Paint 200 milliseconds or less and Cumulative Layout Shift 0.1 or less, at the 75th percentile of real visits.
Animate transform and opacity
Browsers can move, scale and fade elements with transform and opacity without recalculating the layout, and transform changes don’t count towards CLS. Animating width, height, top, left or margins forces layout work on every frame, which can stutter on mid-range phones and register as layout shifts.
Protect responsiveness
INP measures the delay between a tap, click or key press and the next frame the browser paints. A transition’s length doesn’t count against it; how quickly the first frame appears does. So paint the feedback first, do the slow work afterwards, and go easy on heavy animation libraries and scroll listeners, which compete for the browser’s main thread.
Don’t hide content behind reveals
Many scroll-reveal scripts start content invisible and fade it in once the script runs; if the script is slow or fails, visitors see blank space. Make content visible by default, and never animate the hero headline or image into view: it delays reading and can push back Largest Contentful Paint.
Watch the weight
Animation files, background video and 3D scenes add download and processing time, so test on a mid-range phone using mobile data. For virtual tours and 3D viewers, weigh the cost against what the visitor learns.
Motion that everyone can use
For people with vestibular disorders, large movement such as parallax, zooming or content sweeping across the screen can bring on dizziness, nausea or headaches.
Honour prefers-reduced-motion
Most operating systems let people ask for less motion, and websites can detect it with the CSS media feature prefers-reduced-motion. Reduced doesn’t mean none: swap movement for a quick fade or instant change, and keep the feedback. The simplest pattern adds movement only for people who haven’t asked for less:
/* Everyone gets feedback: an instant colour change */
.card:hover {
border-color: var(--accent);
}
/* Only visitors who have not asked for less motion get movement */
@media (prefers-reduced-motion: no-preference) {
.card {
transition: transform 200ms ease-out;
}
.card:hover {
transform: translateY(-4px);
}
}Check it yourself. Switch on the reduce motion setting on your phone or laptop and reload your site. Large movement and autoplay should stop or calm down, while buttons and forms still respond.
The WCAG 2.2 criteria that apply
| Success criterion | Level | What it means for motion |
|---|---|---|
| 2.2.2 Pause, Stop, Hide | A | Anything moving automatically for more than five seconds alongside other content can be paused, stopped or hidden: carousels, logo strips, background video |
| 2.3.1 Three Flashes or Below Threshold | A | Nothing flashes more than three times in any one second, unless below the defined thresholds |
| 2.3.3 Animation from Interactions | AAA | Motion triggered by an interaction can be switched off, unless essential |
Level AA doesn’t require 2.3.3, but honouring the reduced-motion setting is one of W3C’s sufficient techniques for meeting it, at little cost. WCAG 2.2 explained covers the whole standard.
Keyboard and focus
An animated menu must still work from the keyboard: focus stays visible while it animates, and when a full-screen or side panel closes, focus returns to the button that opened it. Our guide to accessible website navigation covers the details.
CSS-first options: view transitions and scroll-driven animations
Browsers now handle effects that once needed a JavaScript library, one of the quieter shifts in the future of websites. That means less code and fewer plugins to update.
View transitions
View transitions animate between two states of a page, or between two pages of the same website: the browser captures the old and new views and blends or morphs between them, so a product card can grow into its detail view instead of jumping. Within a page, a short JavaScript call (document.startViewTransition()) starts them; between pages, a CSS rule (@view-transition) on both pages switches them on. Browsers without support simply change the page without animation, the right fallback, provided the code checks for support first.
Scroll-driven animations
Scroll-driven animations tie an animation’s progress to scrolling through the CSS animation-timeline property, instead of JavaScript reacting to every scroll event. They suit a reading-progress bar or a subtle reveal as a section enters view, not scroll-jacking or large parallax.
Check Baseline, and plan the fallback
Baseline, shown on MDN and web.dev, tells you whether a feature works across the major browsers: “newly available” once it works in the latest version of each, “widely available” 30 months later. At the time of writing (September 2026), MDN lists view transitions within a page as Baseline newly available (since October 2025), while cross-page view transitions and scroll-driven animations still have limited availability. Check before relying on them.
Treat every effect as an enhancement: put it behind a feature check (such as @supports) and a reduced-motion query, and make sure the page works with no animation and no JavaScript.
A motion review checklist
Use this on a design, a prototype or a live site.
Getting motion right on your site
Visitors remember that a site felt quick, clear and trustworthy, not that a button eased out over 180 milliseconds. That comes from planning motion alongside strategy, UX, content, performance and accessibility, not sprinkling it on at the end.
If you’re planning a new site, our website design and development service designs motion with everything else and checks it with reduced motion switched on and from the keyboard before launch. If your current site feels busy or sluggish, a free website audit can show whether heavy scripts and effects are slowing it down.