Use when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-triggered animation.

Hover Interaction Animations Apply Disney's 12 principles to mouse hover states. Principle Application Squash & Stretch : Cards can subtly scale (1.02 1.05) on hover, creating "lift" effect. Anticipation : Hover IS anticipation for click. The hover state previews the interaction. Staging : Hover effects should highlight the interactive element, not distract from it. Straight Ahead vs Pose to Pose : Define rest and hover poses precisely. Transition smoothly between them. Follow Through & Overlapping : Child elements animate after parent. Card lifts, then shadow expands. Slow In/Slow Out : Hover in: ease out (fast response). Hover out: ease in out (graceful return). Arcs : Underlines can draw from center outward. Highlights sweep in curved paths. Secondary Action : Combine multiple subtle effects. Scale + shadow + color shift together. Timing : Hover response: 150 200ms (must feel responsive) Hover exit: 200 300ms (can be slightly slower) Never exceed 300ms for hover in Exaggeration : Subtle hover is preview, not performance. Scale max 1.05, shadow max +8px. Solid Drawing : Hover states must feel like the same element elevated, not a replacement. Appeal : Hover should invite clicking. Create anticipation without demanding action. Timing Recommendations Hover Effect Hover In Hover Out Easing Color Change 150ms 200ms ease out / ease in out Scale/Lift 200ms 250ms ease out / ease in out Shadow 200ms 250ms ease out / ease in out Underline Draw 200ms 200ms ease out Image Zoom 300ms 400ms ease out Icon Shift 150ms 200ms ease out Implementation Patterns Icon Animation Pattern Key Rules 1. Touch devices don't have hover ensure functionality without it 2. Hover in must be under 200ms to feel responsive 3. Don't move elements enough to cause mis clicks 4. Test with @media (hover: hover) to scope to pointer devices 5. Combine max 3 properties to avoid overwhelming

hover-interactions