1实现原理 · 为什么它能做到
给交互动效定硬性时间窗与合成器约束（100–250ms、只动 transform/opacity、按压即时 0.96、进出非对称），把手感转成可检查的参数
skills/micro-interaction/SKILL.md
Duration: UI micro-interactions live in **100–250ms**. Anything over ~400ms feels laggy for a click response.
注：同段给出三条缓动默认值（ease-out 入场、overshoot、标准移动）与进入慢一点、离开快一点的原则。
Framer Motion 侧以手势、弹簧、AnimatePresence 三件套为骨架，弹簧用 stiffness/damping 两个直觉参数调
skills/micro-interaction/SKILL.md
whileTap={{ scale: 0.96 }}
注：给出 stiffness: 400, damping: 30 这类可直接用的 UI 默认值，并解释 damping 影响回弹量。
布局动画是 Framer Motion 的杀手锏：layout 自动把位置与尺寸变化转成 transform，layoutId 让两个组件之间做共享元素（magic move）过渡
skills/micro-interaction/SKILL.md
{!open && <motion.div layoutId="card" onClick={() => setOpen(true)} />}
注：同时点明副作用：layout 会拉伸圆角与文字，需子元素反向缩放或改用 layout="position"。
纯 CSS 路径也能做进场与退场（含 display 切换）：@starting-style 提供首次渲染的起始值，transition-behavior: allow-discrete 让离散属性参与过渡
skills/micro-interaction/SKILL.md
transition-behavior: allow-discrete;
注：使无 JS 库也能做 toast 与 dialog 进出，references 另给弹层 overlay 的同类处理。
把加载到成功到失败当作同一物体的连续状态（按钮变形 spinner 到 checkmark），而不是画面跳切；并强制 reduced-motion 守卫
skills/micro-interaction/SKILL.md
Loading → success → error should be one continuous motion (e.g. a button morphs spinner → checkmark), not a jump cut.
注：验收也据此改写：交互是状态驱动而非时间驱动，所以冻结的是状态（?state=open）而不是时钟。
2核心能力
01悬停、按压、聚焦反馈（whileHover/whileTap/whileFocus 加弹簧）
02进出场动画（AnimatePresence 加 initial/animate/exit 与稳定 key；toast 用 mode="popLayout"）
03布局动画与共享元素（layout 与 layoutId magic move）
04纯 CSS 交互配方（@starting-style、allow-discrete、popover/dialog 退出、@property 可动画自定义属性、spinner 与 toggle）
05Framer Motion 进阶配方（variants 加 stagger、Reorder 拖拽排序、拖拽约束、手势组合）
06reduced-motion 守卫（CSS 全局 0.01ms 与 Framer Motion 侧处理）
07状态冻结 harness（?state=idle/hover/open 映射到 data-state 或受控 prop）
3外部依赖
| 类型 | 依赖 |
|---|---|
| package | motion（Framer Motion，v11+ 以 motion/react 导入） |
| network | 交付页从 CDN 取 React 与 motion（正文点名 esm.sh；产物期引用，不判级） |
| api | 现代 CSS 原语：@starting-style、transition-behavior: allow-discrete、@property、popover/dialog 的 overlay 离散属性 |
| cli | npx / Playwright（宿主侧截图工具）与仓库根 scripts/ 助手（seek-shot.sh、contact-sheet.sh 依赖 ffmpeg） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 浏览器支持声明前后不一致且无源码依据（见 second_pass） — @starting-style 与 allow-discrete 的支持面在 SKILL.md 与 references 描述不同，旧浏览器需要自备降级（文档要求使用者自行核实）。
- 交付页若走 esm.sh 载入 React 与 motion，等于把渲染管线交给第三方 CDN — 单文件演示便利，但产物期依赖远端模块（供应链加离线不可用），且 Framer Motion 体积不小，不适合直接搬进生产。
- Framer Motion 的 layout 性能与视觉副作用 — layout 动画在列表规模大或频繁变更时带来持续变换与重排开销，并会拉伸圆角与文字；文档给了缓解手段但未给规模阈值。
- Packaged helper 语义不匹配（见 second_pass） — helper 是时间冻结（?t=N 秒），本 skill 主要用状态冻结（?state=），照抄命令得不到想要的画面。
风险提醒：绿色，放心使用。判级只依据 skill 自身目录（skills/micro-interaction/ = SKILL.md + 0 字节 README.md + references/{framer-motion-recipes,css-recipes}.md，find 全量核对）：零脚本、零凭证、零写盘、执行期零外发（token 扫描 fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval( 零命中）。正文点名的 esm.sh（React 与 motion 的 CDN）出现在输出契约里，属产物期引用（浏览器打开交付页时拉取），按批4 口径不判级，仅列出端点；npm 包由用户项目安装。
5第二遍独立确认
- [unlocatable] transition-behavior: allow-discrete 与 @starting-style 的支持面 — SKILL.md 写 Baseline in Chrome/Edge/Safari、references 写 Baseline-available in current Chrome/Edge/Safari/Firefox——两处描述不同（SKILL.md 未含 Firefox），且均无源码内依据。正文要求读者 verify @starting-style and allow-discrete for your support floor，即文档自己把核实责任交给使用者，故按文档声明记录并在 risks 提示。
- [ok] layout 造成圆角与文字变形的告诫是否与配方一致 — SKILL.md 的 Gotcha 段与 references 的 magic-move/layout 小节都提示需子元素反向缩放或改用 layout="position"；references 另给 useMotionValue 加 useSpring 的免重渲染建议，互不矛盾。
- [ok] 验收方式与动效性质是否匹配（状态驱动 vs 时间驱动） — SKILL.md 明写 A micro-interaction's frames are its states (idle / hover / pressed / open) 并给 ?state= 方案，同时保留 CSS 循环动画的 animationDelay 加 paused 冻结写法，两路都对得上其讨论的动效类型。
- [discrepancy] Packaged helper 的路径基准与语义 — SKILL.md 写 scripts/seek-shot.sh anim.html 0 1.5 3（秒制、时间冻结），但本 skill 的验收是状态冻结（?state=open），helper 与之不匹配；且 scripts/ 在仓库根，单装形态下相对路径亦不成立。
6结论
适合：适合：① 界面需要响应感的细节打磨（悬停、按压、聚焦反馈、开关、点赞、toast、抽屉、模态、手风琴）；② 列表增删重排与共享元素（magic move）过渡；③ 加载到成功到失败的连续状态设计；④ 想用纯 CSS（无 JS 库）实现进出场与弹层动画的工程。
不适合：不适合：① 页面或路由级转场（走 page-transition-animation）；② 滚动叙事与复杂时间线编排（走 gsap-web）；③ 性能剖析与昂贵属性的系统治理（走 60fps-animation）；④ 需要逐帧确定性取证的时间驱动动画（本 skill 的证据形态是状态而非帧）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 micro-interaction.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent17fbed1b9f12f5ad…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库iart-ai / iart-ai/web-animation-skills
原始 GitHubiart-ai/web-animation-skills ↗
Stars28
最近推送2026-06-22
本 skill commit
b6dba3eb75许可MIT（仓库根 LICENSE 为 MIT License, Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 的 license 字段同为 MIT）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。