🇺🇸

Original

English

🇨🇳

Translation

Chinese

Astro Animations Skill

Astro 动画 Skill

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

提供既能提升用户体验（UX），又不会影响性能或可访问性的动画模式。所有动画都必须具备功能性用途，同时尊重用户的动效偏好。

Core Rules

核心规则

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

功能优先于美观 —— 每个动画都应服务于用户体验
性能第一 —— 优先使用CSS，尽可能避免使用JS
尊重用户偏好 —— 遵循
```
prefers-reduced-motion
```
设置
简约而非浮夸 —— 增强体验，而非分散注意力
快速响应 —— 交互类动画时长控制在300ms以内
无布局偏移 —— 动画不得导致累积布局偏移（CLS）
渐进式增强 —— 即使没有动画，UI也必须能正常工作
Intersection Observer —— 用于基于滚动的元素显示动画
View Transitions API —— 在Astro中用于实现页面过渡效果
加载反馈 —— 始终通过骨架屏或加载指示器展示加载状态

Animation Timing

动画时长与缓动

Type	Duration	Easing
Micro-interaction	100-200ms	ease-out
Reveal/Fade	200-400ms	ease-out
Slide	300-500ms	ease-in-out
Page transition	200-300ms	ease-out

类型	时长	缓动效果
微交互	100-200ms	ease-out
显示/淡入	200-400ms	ease-out
滑动	300-500ms	ease-in-out
页面过渡	200-300ms	ease-out

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

CSS 工具类 —— 基础动画类和关键帧
滚动动画 —— 基于Intersection Observer的元素显示效果
微交互 —— 按钮悬停、表单聚焦、成功/错误状态动画
加载状态 —— 骨架屏和闪烁加载效果
页面过渡 —— View Transitions API 实现方案
序列动画 —— 序列式显示模式
减少动效 —— 可访问性最佳实践

❌ 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

❌ 未处理
```
prefers-reduced-motion
```
的动画
❌ UI反馈动画时长超过500ms
❌ 会阻止用户交互的动画
❌ 无意义/纯装饰性动画
❌ 能用CSS实现却使用JS的动画
❌ 会导致布局偏移的动画
❌ 无用户控制的自动播放动画
❌ 每秒闪烁超过3次的动画

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

所有动画均尊重减少动效的设置
交互类动画时长低于300ms
显示类动画时长低于500ms
动画不会导致布局偏移
加载状态配有骨架屏/加载指示器
页面过渡流畅
焦点状态带有动画
所有动画均已在
```
prefers-reduced-motion: reduce
```
模式下测试
滚动动画使用Intersection Observer实现
无动画会阻止用户交互

astro-animations