---
description: 
globs: *.css,*.html
alwaysApply: false
---
# CSS Animation Excellence Standards

- Prioritize CSS-based animations over JavaScript for better performance
- Target buttery-smooth 60fps animations with clean transitions
- Use hardware-accelerated properties (transform, opacity) whenever possible
- Implement appropriate easing functions that feel natural and responsive
- Ensure animations are subtle and enhance user experience without being distracting
- Design animations that meet Apple-level quality standards for smoothness and polish
- Consider reduced-motion preferences for accessibility
- Optimize animation performance by minimizing repaints and reflows
- Test animations across different device capabilities to ensure consistent experience