Motion
Hover Animation
motionanimationinteractionhovercursor
A visual effect triggered when a user's cursor enters an interactive element.
When to use
- Cards and links — a subtle lift signals interactivity
- Buttons — color shift or underline to confirm affordance
- Always respect prefers-reduced-motion
Examples
- Card scales to 1.02 and shadow deepens on hover
- Navigation link reveals an underline sliding in from left
See this in the wild
Analyze a site and look for hover animation in the breakdown.
