framer-motion-animations
✓使用 Framer Motion（運動包）創建滾動觸發和進入動畫。在添加動畫、實現滾動顯示或從 CSS/Intersection Observer 遷移時使用。
SKILL.md
This skill helps you implement consistent, accessible animations across the codebase using Framer Motion (motion package v12+).
| apps/web/src/app/about/components/variants.ts | Shared animation variants | | apps/web/src/components/animated-number.tsx | Number animation component |
| Scroll-triggered reveals | Motion (whileInView) | | Entrance animations | Motion (initial/animate) | | Staggered lists | Motion (staggerChildren) | | Hover states | CSS (Tailwind transition-) | | Infinite loops (background effects) | CSS keyframes | | Simple state transitions | CSS (transition-all) |
使用 Framer Motion（運動包）創建滾動觸發和進入動畫。在添加動畫、實現滾動顯示或從 CSS/Intersection Observer 遷移時使用。 來源：sgcarstrends/sgcarstrends。
可引用資訊
為搜尋與 AI 引用準備的穩定欄位與指令。
- 安裝指令
npx skills add https://github.com/sgcarstrends/sgcarstrends --skill framer-motion-animations- 分類
- </>開發工具
- 認證
- ✓
- 收錄時間
- 2026-02-01
- 更新時間
- 2026-02-18
快速解答
什麼是 framer-motion-animations？
使用 Framer Motion（運動包）創建滾動觸發和進入動畫。在添加動畫、實現滾動顯示或從 CSS/Intersection Observer 遷移時使用。 來源：sgcarstrends/sgcarstrends。
如何安裝 framer-motion-animations？
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/sgcarstrends/sgcarstrends --skill framer-motion-animations 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code 或 Cursor 中使用
這個 Skill 的原始碼在哪？
https://github.com/sgcarstrends/sgcarstrends
詳情
- 分類
- </>開發工具
- 來源
- skills.sh
- 收錄時間
- 2026-02-01