A subtle, single-purpose animation lasting typically under 500 milliseconds that confirms an interaction, communicates a state change, or provides emotional delight at a micro level. Micro-animations make interfaces feel alive and responsive without distracting from content — for example, a loading indicator smoothly transitioning to a checkmark, or a button briefly scaling on press.
Common contexts
- Designing a success state transition for a payment confirmation that reinforces completion without a separate screen
- Adding a subtle scale animation to a primary CTA to give tactile press feedback on touch devices
- Documenting micro-animation duration and easing values in a design system so engineers implement them consistently
Use when
Use micro-animations to confirm that a user's action was received, especially for interactions that produce no immediate visible result — this single use case prevents the most repeated-click errors.
Avoid when
Don't use micro-animations to compensate for a slow system — animating over a long delay can initially mask latency but quickly becomes frustrating when the animation loops or the delay is unpredictable.
The best micro-animations are noticed only when they're absent — if users are watching the animation rather than the result, it's doing too much.
Real-world examples
- Gmail's 'undo send' feature uses a 5-second countdown animation bar, giving users a visible, time-bounded window to reconsider — the animation itself is what makes the feature feel usable.
- Stripe's payment form animates the card graphic to physically flip and show the back when a user focuses the CVV field, providing spatial feedback that maps perfectly to handling a real credit card.
- The iOS app icon 'jiggle' animation when entering home-screen edit mode is a micro-animation that communicates 'delete mode is active' through motion alone, without any text or tooltip.