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