web-animation-design
✓設計和實現感覺自然且有目的的網頁動畫。每當使用者詢問有關動畫、運動、緩動、計時、持續時間、彈簧、過渡或動畫性能的問題時，請主動使用此技能。這包括有關如何為特定 UI 元素設定動畫、易於使用、動畫最佳實踐或運動的可訪問性注意事項的問題。觸發：緩動、緩出、緩入、緩入出、立方貝塞爾曲線、彈跳、彈簧物理、關鍵幀、變換、不透明度、淡入淡出、滑動、縮放、懸停效果、微交互、Framer Motion、React Spring、GSAP、CSS 過渡、進入/退出動畫、頁面過渡、交錯、意願更改、GPU加速、首選減少運動、模態/下拉/工具提示/彈出框/抽屜動畫、手勢動畫、拖曳互動、按鈕按下感覺、「感覺卡頓」、「使其平滑」。
SKILL.md
A comprehensive guide for creating animations that feel right, based on Emil Kowalski's "Animations on the Web" course.
When this skill is first invoked without a specific question, respond only with: I'm ready to help you with animations based on Emil Kowalski's animations.dev course.
Do not provide any other information until the user asks a question.
設計和實現感覺自然且有目的的網頁動畫。每當使用者詢問有關動畫、運動、緩動、計時、持續時間、彈簧、過渡或動畫性能的問題時，請主動使用此技能。這包括有關如何為特定 UI 元素設定動畫、易於使用、動畫最佳實踐或運動的可訪問性注意事項的問題。觸發：緩動、緩出、緩入、緩入出、立方貝塞爾曲線、彈跳、彈簧物理、關鍵幀、變換、不透明度、淡入淡出、滑動、縮放、懸停效果、微交互、Framer Motion、React Spring、GSAP、CSS 過渡、進入/退出動畫、頁面過渡、交錯、意願更改、GPU加速、首選減少運動、模態/下拉/工具提示/彈出框/抽屜動畫、手勢動畫、拖曳互動、按鈕按下感覺、「感覺卡頓」、「使其平滑」。 來源：connorads/dotfiles。
可引用資訊
為搜尋與 AI 引用準備的穩定欄位與指令。
- 安裝指令
npx skills add https://github.com/connorads/dotfiles --skill web-animation-design- 分類
- *創意媒體
- 認證
- ✓
- 收錄時間
- 2026-02-17
- 更新時間
- 2026-02-18
快速解答
什麼是 web-animation-design？
設計和實現感覺自然且有目的的網頁動畫。每當使用者詢問有關動畫、運動、緩動、計時、持續時間、彈簧、過渡或動畫性能的問題時，請主動使用此技能。這包括有關如何為特定 UI 元素設定動畫、易於使用、動畫最佳實踐或運動的可訪問性注意事項的問題。觸發：緩動、緩出、緩入、緩入出、立方貝塞爾曲線、彈跳、彈簧物理、關鍵幀、變換、不透明度、淡入淡出、滑動、縮放、懸停效果、微交互、Framer Motion、React Spring、GSAP、CSS 過渡、進入/退出動畫、頁面過渡、交錯、意願更改、GPU加速、首選減少運動、模態/下拉/工具提示/彈出框/抽屜動畫、手勢動畫、拖曳互動、按鈕按下感覺、「感覺卡頓」、「使其平滑」。 來源：connorads/dotfiles。
如何安裝 web-animation-design？
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/connorads/dotfiles --skill web-animation-design 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code 或 Cursor 中使用
這個 Skill 的原始碼在哪？
https://github.com/connorads/dotfiles
詳情
- 分類
- *創意媒體
- 來源
- skills.sh
- 收錄時間
- 2026-02-17