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