ONE-OS/axhub-make/skills/default-resource-recommendations/references/default-animation-libraries.md

默认动画库推荐

使用时机：仅在需要复杂动画交互 且 用户未指定动画方案 且 主题中无自定义动画系统时使用。

⚠️ 重要提醒：动画不是必须的！

• 少量简单动画 → 直接使用 CSS 原生动画（transition、@keyframes、animation）
• Tailwind 项目 → 优先使用内置的 transition-*、animate-* 类
• 只有在动画数量多或交互复杂时，才考虑引入动画库

🎬 推荐列表

动画库	推荐理由	AI 生成友好度	核心劣势	适用场景
CSS 原生动画	⚡️ 零依赖首选 浏览器原生支持，无包体积，性能最优。	🌟🌟🌟🌟🌟 AI 对 CSS 动画极度熟悉	复杂时序控制困难， 手势交互需额外代码	默认首选。 Hover、Focus、简单过渡。
Tailwind Animate (tailwindcss-animate)	⚡️ Shadcn/UI 默认方案 纯 Class 控制，零 JS 心智负担。	🌟🌟🌟🌟🌟 AI 只需拼 class，几乎不会翻车	表达力有限， 无法处理复杂时序和状态	下拉、Toast、Modal、 Tooltip 等基础过渡。
Framer Motion	👑 React 动画事实标准 声明式 API + Layout 动画 + 手势系统。	🌟🌟🌟🌟🌟 训练数据极多，AI 可稳定生成复杂动画	包体积偏大， 学习成本略高	复杂交互原型、页面转场、 拖拽排序、微交互系统。
AutoAnimate (@formkit/auto-animate)	✨ 一行代码魔法动画 DOM 变化即动画，极致省心。	🌟🌟🌟🌟 AI 基本不用理解动画原理	不可控， 难以产品级精调	列表 CRUD、表格增删、 卡片排序。

🎯 选择策略

按需求复杂度匹配：

1. 不需要动画 → 不引入任何动画库 ✅
2. 需要动画但数量少（< 5 处） → CSS 原生动画 ✅
3. 大量动画 → 按复杂度选择：
   • 简单过渡 → Tailwind Animate
   • 列表增删 → AutoAnimate
   • 手势/布局/复杂时序 → Framer Motion

💡 CSS 原生动画示例

/* 简单 Hover 效果 - 无需任何库 */
.button {
  transition: all 0.2s ease;
}
.button:hover {
  transform: scale(1.05);
}

/* 淡入动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.card {
  animation: fadeIn 0.3s ease-out;
}

<!-- Tailwind 内置动画 - 无需额外依赖 -->
<div class="transition-all duration-300 hover:scale-105">
  Hover 放大
</div>
<div class="animate-pulse">
  加载占位符
</div>

⚠️ 注意事项

1. 性能优先：动画过多会影响性能，尤其在移动端
2. 避免过度使用：克制使用动画，仅在提升 UX 时添加
3. 按需引入：Framer Motion 较大，确认需要复杂动画再引入
4. 一致性：同一项目尽量使用统一的动画方案
5. 可访问性：尊重用户的 prefers-reduced-motion 设置