Updated 2026-07-23 · 8 min read
Micro-interactions are the small, functional animations that respond to a user's actions — a button depressing, a toggle sliding, a field confirming input, a menu easing open. Done well, they make an interface feel responsive and considered. Done poorly, they make it feel slow and noisy. The craft is almost entirely in restraint and timing.
Every good micro-interaction does a job: confirm an action happened, show state changed, guide attention, or communicate system status. If an animation does none of those, it is decoration — and decoration is the first thing that makes a UI feel amateur or dated. Ask "what is this motion telling the user?" before adding it.
Most UI micro-interactions should last 150–300ms. Faster feels instant (sometimes too abrupt); slower feels laggy. Use ease-out for elements entering (fast then settling) and ease-in for elements leaving. Reserve longer durations (400–600ms) for larger, deliberate transitions like a modal or a hero reveal. Consistent tokens — say 150/300/600ms — keep the whole product feeling coherent.
--dur-fast: 150ms; --dur-base: 250ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
button { transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast); }
The difference between premium and gimmicky is quantity. One considered interaction per component, one signature moment per page. When everything animates, nothing signals — and the page feels heavy. This is the same principle behind avoiding the generic AI look: meaning comes from scarcity.
Some users get motion sickness or simply prefer stillness. Always honor prefers-reduced-motion by disabling or dampening non-essential animation. Keep essential feedback (like a loading state) but drop parallax, large movement and auto-playing motion. This is both an accessibility requirement and a quality signal — see the accessibility checklist.
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition-duration: 0.01ms !important; } }
Animate only transform and opacity where possible — they are cheap for the browser to composite. Animating layout properties (width, height, top, left) triggers reflow and causes jank, especially on mobile. Smooth motion on a mid-range phone matters more than elaborate motion on your laptop.
Add micro-interactions to these components without changing the layout. Use a 150–250ms ease-out transition on hover and press for buttons and cards, an animated focus-visible ring, and loading and success states for the form. Animate only transform and opacity. Keep it subtle — one interaction per component. Fully respect prefers-reduced-motion.
Micro-interactions are small, functional animations that respond to user actions — hover, press, focus, loading, success and error states. Their job is to confirm actions, show state changes and guide attention, not to decorate.
Most micro-interactions should run 150–300ms with ease-out for entering elements. Faster can feel abrupt, slower feels laggy. Reserve 400–600ms for larger transitions like modals or hero reveals, and keep consistent duration tokens across the product.
They can if overused. Always honor prefers-reduced-motion, avoid content that flashes rapidly, and animate only transform and opacity to prevent layout jank — especially on mobile. Used sparingly, they improve perceived quality.