Astro Animations

Astro Animations Skill

Purpose

Provides animation patterns that enhance UX without harming performance or accessibility. All animations must serve a functional purpose and respect user motion preferences.

Core Rules

1. Purpose over polish — Every animation should serve UX
2. Performance first — Use CSS, avoid JS where possible
3. Respect preferences — Honor prefers-reduced-motion
4. Subtle over flashy — Enhance, don't distract
5. Fast — Animations under 300ms for interactions
6. No layout shift — Animations must not cause cumulative layout shift
7. Progressive enhancement — UI must work without animations
8. Intersection Observer — Use for scroll-based reveals
9. View Transitions API — Leverage for page transitions in Astro
10. Loading feedback — Always show loading states with skeletons or spinners

Animation Timing

References

• CSS Utilities — Base animation classes and keyframes
• Scroll Animations — Intersection Observer-based reveals
• Micro-Interactions — Button hovers, form focus, success/error animations
• Loading States — Skeleton loaders and shimmer effects
• Page Transitions — View Transitions API implementation
• Stagger Animations — Sequential reveal patterns
• Reduced Motion — Accessibility best practices

Forbidden

• ❌ Animations without prefers-reduced-motion handling
• ❌ Animations over 500ms for UI feedback
• ❌ Animations that block interaction
• ❌ Gratuitous/decorative-only animations
• ❌ JS animations when CSS works
• ❌ Animations that cause layout shift
• ❌ Auto-playing animations without user control
• ❌ Animations that flash more than 3 times per second

Definition of Done

• All animations respect reduced motion
• Interaction animations under 300ms
• Reveal animations under 500ms
• No layout shift from animations
• Loading states have skeleton/spinner
• Page transitions smooth
• Focus states animated
• All animations tested with prefers-reduced-motion: reduce
• Scroll animations use Intersection Observer
• No animation blocks user interaction