Interactions · Motion
Micro-interaction
Also called: Microinteraction, Micro-animation, Feedback animation
A short feedback animation around one small action, like a heart popping when you like something, a toggle knob sliding over, or a copy icon turning into a checkmark.
In detail
A micro-interaction is the smallest unit of "one action + one small piece of feedback": a button shrinks slightly when pressed, a toggle knob slides across, a like icon grows and bounces back, a copy button turns into a checkmark for 2 seconds, a strength meter appears as you type a password. It lets users confirm "my action worked," and makes the product feel polished.
How it relates to transitions: a transition is the technique (a property changes smoothly from A to B), and a micro-interaction is the design goal (feedback for a specific action). A micro-interaction is usually made of one or two transitions or keyframe animations.
The rule is short (100–300ms), light, and meaningful. Don't animate just to animate. When asking AI for one, describe the trigger, what changes, and how long it lasts. That's much more useful than "add some animation."
Developer infoTerm ID, DOM cues, match priority
- Term ID
interaction-micro-interaction- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026