Micro Animation Design

Micro-Animation Categories

Feedback

• Button press (scale down 95%, 100ms).
• Toggle switch (slide + color, 200ms).
• Checkbox (check mark draws in, 200ms).
• Like/heart (scale up + color, 300ms with spring easing).

State Transitions

• Accordion open/close (height + opacity, 250ms).
• Tab switch (slide + fade, 200ms).
• Modal enter (scale from 95% + fade, 200ms).
• Modal exit (fade out, 150ms — exits should be faster than enters).