Skill 多語言閱讀指南
web-animation-design用途、用法與原始來源
設計並實現自然流暢、效果出色的網頁動畫。當使用者詢問有關動畫、運動、緩動、時間、持續時間、彈簧、過渡或動畫性能的問題時，積極運用這項技能。這包括如何為特定 UI 元素添加動畫、使用哪種緩動效果、動畫最佳實踐或運動的可訪問性注意事項等問題。觸發條件：緩動、緩出、緩入、緩出、三次貝塞爾曲線、彈跳、彈簧物理、關鍵影格、變換、不透明度、淡入淡出、滑動、縮放、懸停效果、微互動、Framer Motion、React Spring、GSAP、CSS 過渡。entrance/exit動畫、頁面過渡、交錯、將要更改、GPU 加速、優先減少動態效果modal/dropdown/tooltip/popover/drawer動畫、手勢動畫、拖曳互動、按鈕按下感覺都很生硬，需要使其流暢。
原文擷取時間:
- SKILL.md
.agents/skills/web-animation-design/SKILL.md- 儲存庫 Star
- 5,871
- 儲存庫最近更新
- 2026-08-29
- 能力分類
- Agent 工作流程
- 最近採集時間
授權：MIT
流程片段用來協助閱讀上游說明。本頁沒有執行第三方 Skill，不屬於實測評測。
下面的用途與操作片段來自上游文件，由本站整理並翻譯，和另行標示的 Codez 編輯分析分開呈現。
這個 Skill 能做什麼
設計並實現自然流暢、效果出色的網頁動畫。當使用者詢問有關動畫、運動、緩動、時間、持續時間、彈簧、過渡或動畫性能的問題時，積極運用這項技能。這包括如何為特定 UI 元素添加動畫、使用哪種緩動效果、動畫最佳實踐或運動的可訪問性注意事項等問題。觸發條件：緩動、緩出、緩入、緩出、三次貝塞爾曲線、彈跳、彈簧物理、關鍵影格、變換、不透明度、淡入淡出、滑動、縮放、懸停效果、微互動、Framer Motion、React Spring、GSAP、CSS 過渡。entrance/exit動畫、頁面過渡、交錯、將要更改、GPU 加速、優先減少動態效果modal/dropdown/tooltip/popover/drawer動畫、手勢動畫、拖曳互動、按鈕按下感覺都很生硬，需要使其流暢。
如何使用：上游操作流程
快速入門
所有動畫決策都始於以下問題：這個元素是進入還是退出？ → 使用ease-out螢幕上的元素在移動嗎？ → 使用ease-in-out這是hover/color過渡？ → 使用ease
Before: transform: scale(0)
After: transform: scale(0.95)
────────────────────────────
Before: 400ms duration
After: 200ms環境與相依需求
本次未從該檔案選出獨立的環境需求片段，不代表無須相依套件。請繼續核對儲存庫的安裝說明和引用檔案。
限制與結果檢查
開始使用前
- 先核對支援的 Agent 宿主和儲存庫安裝說明。保留完整 Skill 目錄及其引用的腳本、資源和文件，只複製 SKILL.md 可能遺漏相依需求。
- 向 Agent 提供實際輸入、預期輸出和驗收標準。呼叫方式與可用工具取決於宿主環境，本站不假定存在通用的安裝指令。
- 先在暫存專案或輸入副本上試用。涉及修改檔案、遠端服務或計費資源的操作，應逐項核對後再授權。
- 依照原文檢查項目和自己的需求驗證輸出。成功觸發或儲存庫 Star 較高，都不能證明結果正確。
繼續閱讀原始文件
相關 Skill
翻譯與介紹範圍
本頁從固定版本的上游 SKILL.md 整理用途與操作片段，譯文使用輔助翻譯。它不是完整手冊，也不代表經過相容性實測；使用前請核對原文及其引用檔案。
介紹依據下方列出的固定版本；目前儲存庫動態和目錄擷取時間分開呈現。
- 固定版本來源
- 閱讀原文 ↗
- 原文擷取時間
- 來源提交版本
cf865e94de7729751c747171785b6ce57e7b178c- 原文 SHA-256
dfcfd66edc4b09e22416c8be59160fd15259965e5f6f1cfa098858d7b23d4332