react-bits 动画审计手册八大类别、精确数值基线与可执行的审查工作流【免费下载链接】react-bitsAn open source collection of animated, interactive fully customizable React components for building memorable websites.项目地址: https://gitcode.com/GitHub_Trending/rea/react-bits本文基于 react-bits 仓库中面向 AI Agent 的动效审计手册 AUDIT.md完整梳理该手册定义的八类审计维度、每一类必须逐字引用的精确数值基线缓动曲线、时长预算、缩放区间、速度阈值等以及它在上游 improve-animations 技能 中先侦察、再审计、后写计划的完整工作流。读完本文你可以直接套用这套标准对任意 React/CSS 代码库的动效做系统性体检并产出精确到file:line的修复计划。一、这套手册在 react-bits 中扮演什么角色react-bits 是一个动效组件库站点站点内沉淀了大量transition、keyframes、CSS 变量与第三方动效库的使用场景。仓库在AGENTS/SKILLS/下为 AI Agent 定义了一组动效治理技能其中improve-animations负责对整个代码库做审计并产出实施计划只读不改源码其规则目录即 AUDIT.md配套的 PLAN-TEMPLATE.md 规定了每份修复计划必须自包含精确曲线、时长、文件路径、代码摘录的模板。AUDIT.md 开篇有一条硬性纪律Never approximate a value that appears here — copy it.这里出现的任何数值都不允许近似必须逐字抄录。也就是说审计结论与修复计划中引用的曲线、时长、阈值必须与本手册一致不允许凭感觉给出近似值。手册内容提炼自 Emil Kowalski 的设计工程理念共八个类别下节逐一展开。审计如何被调度四个阶段与投入等级根据 SKILL.md审计并非一上来就逐文件找茬而是四阶段流水线阶段内容Phase 1 — Recon侦察永远最先摸清技术栈Framer Motion / React Spring / GSAP / 纯 CSS / WAAPI、组件库Radix、Base UI、shadcn/ui、动效 token 约定--ease-*、--duration-*、产品性格活泼还是克制并建立频率地图哪些元素每天被触发 100 次命令面板、键盘快捷键、列表悬停哪些偶尔触发模态框、Toast哪些罕见onboardingPhase 2 — Audit审计可并行按本手册八大类别逐项检查大型仓库可派只读子代理每个类别一个Phase 3 — Vet复核与优先级对每条发现的file:line亲自重读代码确认剔除有意为之、归因错误、重复或本就豁免的项按杠杆率 影响 ÷ 工作量排序成表Phase 4 — Plans写计划每个被选中的发现写一份自包含计划输出到plans/NNN-short-slug.md打上当前 commit 短哈希并维护plans/README.md的执行顺序与依赖投入等级effort决定审计覆盖面quick只看高流量组件、约 5 条且仅 HIGH 严重级standard默认覆盖全部交互 UI、0–4 个子代理deep覆盖整个仓库含营销页、≤8 个子代理并附带 LOW 级打磨项。调用变体还支持plan 描述跳过审计直接写单份计划、execute plan派执行子代理在隔离 worktree 实施并用 review 标准验收、reconcile核对plans/与当前代码标记已完成、刷新过期的file:line。严重级定义同样来自 SKILL.mdHIGH 破坏手感UI 上用错缓动、键盘/高频动作上做了动画、掉帧、scale(0)MEDIUM 明显不对劲origin 错误、动态 UI 不可中断、缺少 reduced-motion 处理LOW 打磨项stagger、blur 遮罩交叉淡入、token 合并。二、类别 1Purpose Frequency目的与频率核心判据每一个动画都必须能回答它为什么动—— 空间一致性、状态指示、反馈、解释或者阻止一次生硬跳变。对高频元素来说看起来酷不是目的。判定表原样继承触发频率决策每天 100 次键盘快捷键、命令面板开合永远不做动画每天数十次悬停效果、列表导航移除或大幅削减偶尔模态框、抽屉、Toast标准动画罕见 / 首次onboarding、反馈、庆祝可以加入愉悦感审计时重点搜寻键盘发起动作上的动画、带开合过渡的命令面板Raycast 没有开合动画——这是正确的做法、被频繁命中的列表项/悬停状态上的装饰性运动。最强的修复往往就是删掉动画。类别 2Easing Duration缓动与时长缓动选择遵循固定决策顺序进入或退出 →ease-out起步快手感跟手屏幕上移动 / 形变 →ease-in-out悬停 / 颜色变化 →ease恒定运动跑马灯、进度条→linear默认值 →ease-outUI 上出现ease-in永远算一条审计发现—— 它起步慢恰恰拖慢了用户正在注视的那一刻。内置 CSS 缓动对刻意的动效来说太弱计划中应引入强自定义曲线并以 token 形式落地、贴合仓库约定--ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out for UI */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* strong ease-in-out for on-screen movement */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like drawer curve */时长预算 ——UI 动画总时长保持在 300ms 以内元素时长按钮按压反馈100–160msTooltip、小弹层125–200ms下拉框、选择器150–250ms模态框、抽屉200–500ms营销 / 解释性动效可以更长重点搜寻任何位置的ease-in、入场动效上裸用ease/linear、UI 元素上超过 300ms 的时长、工具栏里每个 tooltip 都带延迟 动画第一个之后应当瞬时出现。仓库内的活证据react-bits 自身站点恰好按此规范落地了 token。src/css/variables.css 中定义的三条曲线与手册给出的值逐字一致并配套了时长与组合 token--ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --dur-press: 120ms; /* 落在 100–160ms 按压反馈预算内 */ --dur-tooltip: 160ms; /* 落在 125–200ms 预算内 */ --dur-menu: 200ms; /* 落在 150–250ms 预算内 */ --dur-panel: 280ms; /* 落在 200–500ms 预算内 */ --transition-fast: 0.15s var(--ease-out); --transition-base: 0.2s var(--ease-out); --transition-slow: 0.3s var(--ease-out);站点各 CSS 文件也普遍消费这些 token例如 src/css/docs.css 的transform var(--dur-press) var(--ease-out)按压反馈、src/css/preview-slider.css 的菜单过渡。这正是类别 7 所说的曲线与时长应作为共享 token 存在的正面示例。反过来同一仓库也能演示审计会抓到什么src/css/landing.css 等多处使用transition: all 0.4s var(--ease-out)—— 同时命中类别 20.4s 超出 UI 300ms 预算与类别 5transition: all两条 Hunt 规则。用本手册对 react-bits 站点代码本身跑一轮审计就是现成的练习场景。类别 3Physicality Origin物理感与变换原点永远不要scale(0)—— 现实世界中没有东西从无到有。目标值scale(0.9–0.97)opacity: 0。Popover / 下拉 / Tooltip 必须从触发器缩放而不是从中心.popover { transform-origin: var(--radix-popover-content-transform-origin); } /* Radix */ .popover { transform-origin: var(--transform-origin); } /* Base UI */模态框豁免—— 它们本就居中呈现transform-origin: center在那里是正确的不要报它。按压反馈:active上transform: scale(0.97)配transition: transform 160ms ease-out。保持克制0.95–0.98 区间。重点搜寻scale(0)、没有任何初始变换的纯淡入、触发器锚定元素上transform-origin: center或缺失、可按压元素没有按压反馈。仓库内的活证据对 react-bits 源码 grepscale(0)会命中多处例如导航装饰动画 src/content/Components/GooeyNav/GooeyNav.cssL80、L135、L202、L227 均有transform: scale(0)。从源码结构看这类用法集中在粘滞导航装饰元素上是否属于违规要按类别 1 的频率表再判定——这正体现了手册每条发现必须复核上下文、剔除有意为之的复核要求。类别 4Interruptibility可中断性关键机制差异CSStransitions 支持动画中途从当前状态重定向keyframes 则从头重启。任何会被快速连续触发或中途可逆的 UI堆叠的 Toast、开关、拖拽、展开/折叠必须使用 transition 或弹簧。无 JS 的入场动画starting-style旧浏览器回退useEffect里设置data-mounted属性。手势驱动的运动应使用弹簧 —— 被中断时弹簧会保留速度。推荐 Apple 风格弹簧配置{ type: spring, duration: 0.5, bounce: 0.2 }。bounce 保持克制0.1–0.3可见的回弹只留给 drag-to-dismiss 和轻松有趣的时刻。不对称时序用户做决定的阶段按压、长按、破坏性确认动画更慢系统的响应则应瞬时。按压与释放对称计时本身就是一条发现。重点搜寻Toast/开关/高频触发 UI 上的keyframes、用固定时长 keyframes 做补间的手势处理器、拖拽缺少基于速度的松手判定判定公式Math.abs(distance)/elapsedMs ~0.11而不是单纯的距离阈值、拖拽边界处的硬停而不是递增摩擦力。类别 5Performance性能只动画transform与opacity。width/height/margin/padding/top/left会触发 布局 绘制 合成 全链路。transition: all会把意料之外的属性带出 GPU —— 永远算一条发现。Framer Motion 的x/y/scale简写不享受硬件加速—— 它们跑在主线程负载下掉帧。目标写法完整 transform 字符串animate{{ transform: translateX(100px) }}。不要用父元素上的 CSS 变量驱动子元素变换—— 它会为所有子元素重算样式。直接在该元素上设置transform。负载下 CSS及 WAAPI优于基于 rAF 的 JS —— 预定义动效用 CSS动态/手势动效用 JS 与弹簧。过渡期的filter: blur()保持在 20px 以下 —— 重模糊很贵Safari 尤甚。重点搜寻transition: all、被动画的布局属性、繁忙页面上的 Framer Motion 简写 prop、setProperty(--x, …)驱动子元素变换、CSS 本可完成却用 rAF 循环硬做的动效。类别 6Accessibility可访问性media (prefers-reduced-motion: reduce) { .element { animation: fade 0.2s ease; } /* 保留 opacity/颜色去掉位移 */ } media (hover: hover) and (pointer: fine) { .element:hover { transform: scale(1.05); } /* 触屏点按会误触发 hover */ }Reduced motion 的含义是更少、更温和的动画而不是零—— 保留有助于理解的状态过渡移除位置变化。JS 侧用useReducedMotion()并对变换值做分支。重点搜寻没有任何prefers-reduced-motion处理的位移动画、未加门控的:hover动效、把全部反馈一刀切清零的 reduced-motion 实现。仓库内的活证据src/css/docs.css 采用了正向做法 —— 用media (prefers-reduced-motion: no-preference)反向门控区块入场动画reduced-motion 用户自动失去位移、保留静态呈现media (prefers-reduced-motion: no-preference) { .docs-section { animation: docs-section-enter var(--dur-panel) var(--ease-out) both; } } keyframes docs-section-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }其中translateY(10px)的初始位移 淡入也同时满足类别 3入场要有初始变换的要求。此外对src/下 grepprefers-reduced-motion的命中遍布 landing 组件与部分 content 组件说明站点已把该门控当作通用实践。类别 7Cohesion Tokens一致性与 Token动效要匹配产品性格 —— 活泼的可以更有弹性仪表盘要利落克制。组件间性格不一致本身就是一条发现。曲线和时长应作为共享 token 存在。五个手写的、几乎一样的 cubic-bezier 是一条合并 token发现。整组同时出现、本应加30–80ms stagger的入场。stagger 是装饰性的 —— 绝不允许阻塞交互。显示两个重叠状态的刺眼交叉淡入可以在过渡期间叠加微弱的filter: blur(2px)来遮罩。重点搜寻重复的近似缓动/时长、利落实体里混进来的一个弹性组件、没有 stagger 的列表/网格入场、肉眼可见双重曝光的交叉淡入。类别 8Missed Opportunities错失的机会这是唯一的增量型类别 —— 找出现在没动、但应该动的地方会瞬移的状态变化内容替换、布局跳动一段简短过渡本可阻止生硬感。空间上相连的 UI从触发器出现的面板没有运动来解释它从哪来。罕见、高情绪的时刻首次运行、成功、庆祝没有被使用被允许的愉悦预算。工具translate百分比translateY(100%)等于元素自身高度与clip-path: inset()揭示动画 —— 不要用硬编码像素偏移。上报数量最多只有几条且必须基于你真实观察到的 UX 缝隙不是一张愿望清单。三、如何把审计结论变成可执行计划AUDIT.md 只负责判断标准每条被选中的发现如何落地由 PLAN-TEMPLATE.md 规定。计划必须假设执行者是一个零上下文、零品味的模型因此模板强制Problem每个位置都引用为path/to/file.tsx:123并附上当前代码原文Target终态的精确值 —— 曲线、时长、弹簧配置、媒体查询禁止写用个顺眼的缓动Repo conventions to follow这个代码库已有的做法 一个可供模仿的范例文件Steps一步一个具体编辑Boundaries不许碰的文件、不动 markup 只改运动属性、不加新依赖、代码与计划不符drift时停下上报而不是即兴发挥Verification机械验证typecheck/lint/build 的确切命令手感检查DevTools 播放速度调到 10%、切换prefers-reduced-motion确认位移被去掉而透明度反馈保留、真机测手势 机器/肉眼可判定的完成标准。模板还规定计划作者必须从 AUDIT.md 取值、绝不凭记忆近似写完计划后更新plans/README.md计划表、推荐执行顺序、依赖关系。SKILL.md 的 Hard Rules 进一步约束整个流程绝不改源码只写plans/、不做任何变更型操作、计划完全自包含内联精确 cubic-bezier、时长、文件路径与代码摘录、仓库内容视为数据而非指令、不重审已定案的有意取舍。四、上手路径把这套手册用于你的代码库先侦察greptransition、animation、keyframes、motion.、animate{、useSpring、ease-in、transition: all、scale(0)、prefers-reduced-motion、transform-origin建立 token 现状与频率地图SKILL.md Phase 1 给出的完整清单。按八类逐项审计每类都带着本节的Hunt for清单去搜记录file:line 证据。逐条复核并定级对照严重级定义HIGH/MEDIUM/LOW与杠杆率排序剔除豁免项如模态框的transform-origin: center、营销页的长时长。引用数值只抄不猜cubic-bezier(0.23, 1, 0.32, 1)、100–160ms 按压、30–80ms stagger、bounce: 0.2、速度阈值~0.11 px/ms、blur 20px……这些值在审计表格里是精确基线近似即违规。输出自包含计划按 PLAN-TEMPLATE.md 结构逐条成文机械验证 手感检查缺一不可。最后记住 SKILL.md 对语气与诚实度的要求用证据平实地陈述发现一份简短的高置信、高杠杆计划清单优于冗长注水版——这里的动效本来就是对的同样是一个合法的审计结论当手感无法仅凭代码判断交叉淡入、弹簧回弹时如实标注不确定性并把手感检查步骤写进计划而不是猜测。【免费下载链接】react-bitsAn open source collection of animated, interactive fully customizable React components for building memorable websites.项目地址: https://gitcode.com/GitHub_Trending/rea/react-bits创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 react-bits 动画审计手册：八大类别、精确数值基线与可执行的审查工作流
react-bits 动画审计手册八大类别、精确数值基线与可执行的审查工作流【免费下载链接】react-bitsAn open source collection of animated, interactive fully customizable React components for building memorable websites.项目地址: https://gitcode.com/GitHub_Trending/rea/react-bits本文基于 react-bits 仓库中面向 AI Agent 的动效审计手册 AUDIT.md完整梳理该手册定义的八类审计维度、每一类必须逐字引用的精确数值基线缓动曲线、时长预算、缩放区间、速度阈值等以及它在上游 improve-animations 技能 中先侦察、再审计、后写计划的完整工作流。读完本文你可以直接套用这套标准对任意 React/CSS 代码库的动效做系统性体检并产出精确到file:line的修复计划。一、这套手册在 react-bits 中扮演什么角色react-bits 是一个动效组件库站点站点内沉淀了大量transition、keyframes、CSS 变量与第三方动效库的使用场景。仓库在AGENTS/SKILLS/下为 AI Agent 定义了一组动效治理技能其中improve-animations负责对整个代码库做审计并产出实施计划只读不改源码其规则目录即 AUDIT.md配套的 PLAN-TEMPLATE.md 规定了每份修复计划必须自包含精确曲线、时长、文件路径、代码摘录的模板。AUDIT.md 开篇有一条硬性纪律Never approximate a value that appears here — copy it.这里出现的任何数值都不允许近似必须逐字抄录。也就是说审计结论与修复计划中引用的曲线、时长、阈值必须与本手册一致不允许凭感觉给出近似值。手册内容提炼自 Emil Kowalski 的设计工程理念共八个类别下节逐一展开。审计如何被调度四个阶段与投入等级根据 SKILL.md审计并非一上来就逐文件找茬而是四阶段流水线阶段内容Phase 1 — Recon侦察永远最先摸清技术栈Framer Motion / React Spring / GSAP / 纯 CSS / WAAPI、组件库Radix、Base UI、shadcn/ui、动效 token 约定--ease-*、--duration-*、产品性格活泼还是克制并建立频率地图哪些元素每天被触发 100 次命令面板、键盘快捷键、列表悬停哪些偶尔触发模态框、Toast哪些罕见onboardingPhase 2 — Audit审计可并行按本手册八大类别逐项检查大型仓库可派只读子代理每个类别一个Phase 3 — Vet复核与优先级对每条发现的file:line亲自重读代码确认剔除有意为之、归因错误、重复或本就豁免的项按杠杆率 影响 ÷ 工作量排序成表Phase 4 — Plans写计划每个被选中的发现写一份自包含计划输出到plans/NNN-short-slug.md打上当前 commit 短哈希并维护plans/README.md的执行顺序与依赖投入等级effort决定审计覆盖面quick只看高流量组件、约 5 条且仅 HIGH 严重级standard默认覆盖全部交互 UI、0–4 个子代理deep覆盖整个仓库含营销页、≤8 个子代理并附带 LOW 级打磨项。调用变体还支持plan 描述跳过审计直接写单份计划、execute plan派执行子代理在隔离 worktree 实施并用 review 标准验收、reconcile核对plans/与当前代码标记已完成、刷新过期的file:line。严重级定义同样来自 SKILL.mdHIGH 破坏手感UI 上用错缓动、键盘/高频动作上做了动画、掉帧、scale(0)MEDIUM 明显不对劲origin 错误、动态 UI 不可中断、缺少 reduced-motion 处理LOW 打磨项stagger、blur 遮罩交叉淡入、token 合并。二、类别 1Purpose Frequency目的与频率核心判据每一个动画都必须能回答它为什么动—— 空间一致性、状态指示、反馈、解释或者阻止一次生硬跳变。对高频元素来说看起来酷不是目的。判定表原样继承触发频率决策每天 100 次键盘快捷键、命令面板开合永远不做动画每天数十次悬停效果、列表导航移除或大幅削减偶尔模态框、抽屉、Toast标准动画罕见 / 首次onboarding、反馈、庆祝可以加入愉悦感审计时重点搜寻键盘发起动作上的动画、带开合过渡的命令面板Raycast 没有开合动画——这是正确的做法、被频繁命中的列表项/悬停状态上的装饰性运动。最强的修复往往就是删掉动画。类别 2Easing Duration缓动与时长缓动选择遵循固定决策顺序进入或退出 →ease-out起步快手感跟手屏幕上移动 / 形变 →ease-in-out悬停 / 颜色变化 →ease恒定运动跑马灯、进度条→linear默认值 →ease-outUI 上出现ease-in永远算一条审计发现—— 它起步慢恰恰拖慢了用户正在注视的那一刻。内置 CSS 缓动对刻意的动效来说太弱计划中应引入强自定义曲线并以 token 形式落地、贴合仓库约定--ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out for UI */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* strong ease-in-out for on-screen movement */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like drawer curve */时长预算 ——UI 动画总时长保持在 300ms 以内元素时长按钮按压反馈100–160msTooltip、小弹层125–200ms下拉框、选择器150–250ms模态框、抽屉200–500ms营销 / 解释性动效可以更长重点搜寻任何位置的ease-in、入场动效上裸用ease/linear、UI 元素上超过 300ms 的时长、工具栏里每个 tooltip 都带延迟 动画第一个之后应当瞬时出现。仓库内的活证据react-bits 自身站点恰好按此规范落地了 token。src/css/variables.css 中定义的三条曲线与手册给出的值逐字一致并配套了时长与组合 token--ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --dur-press: 120ms; /* 落在 100–160ms 按压反馈预算内 */ --dur-tooltip: 160ms; /* 落在 125–200ms 预算内 */ --dur-menu: 200ms; /* 落在 150–250ms 预算内 */ --dur-panel: 280ms; /* 落在 200–500ms 预算内 */ --transition-fast: 0.15s var(--ease-out); --transition-base: 0.2s var(--ease-out); --transition-slow: 0.3s var(--ease-out);站点各 CSS 文件也普遍消费这些 token例如 src/css/docs.css 的transform var(--dur-press) var(--ease-out)按压反馈、src/css/preview-slider.css 的菜单过渡。这正是类别 7 所说的曲线与时长应作为共享 token 存在的正面示例。反过来同一仓库也能演示审计会抓到什么src/css/landing.css 等多处使用transition: all 0.4s var(--ease-out)—— 同时命中类别 20.4s 超出 UI 300ms 预算与类别 5transition: all两条 Hunt 规则。用本手册对 react-bits 站点代码本身跑一轮审计就是现成的练习场景。类别 3Physicality Origin物理感与变换原点永远不要scale(0)—— 现实世界中没有东西从无到有。目标值scale(0.9–0.97)opacity: 0。Popover / 下拉 / Tooltip 必须从触发器缩放而不是从中心.popover { transform-origin: var(--radix-popover-content-transform-origin); } /* Radix */ .popover { transform-origin: var(--transform-origin); } /* Base UI */模态框豁免—— 它们本就居中呈现transform-origin: center在那里是正确的不要报它。按压反馈:active上transform: scale(0.97)配transition: transform 160ms ease-out。保持克制0.95–0.98 区间。重点搜寻scale(0)、没有任何初始变换的纯淡入、触发器锚定元素上transform-origin: center或缺失、可按压元素没有按压反馈。仓库内的活证据对 react-bits 源码 grepscale(0)会命中多处例如导航装饰动画 src/content/Components/GooeyNav/GooeyNav.cssL80、L135、L202、L227 均有transform: scale(0)。从源码结构看这类用法集中在粘滞导航装饰元素上是否属于违规要按类别 1 的频率表再判定——这正体现了手册每条发现必须复核上下文、剔除有意为之的复核要求。类别 4Interruptibility可中断性关键机制差异CSStransitions 支持动画中途从当前状态重定向keyframes 则从头重启。任何会被快速连续触发或中途可逆的 UI堆叠的 Toast、开关、拖拽、展开/折叠必须使用 transition 或弹簧。无 JS 的入场动画starting-style旧浏览器回退useEffect里设置data-mounted属性。手势驱动的运动应使用弹簧 —— 被中断时弹簧会保留速度。推荐 Apple 风格弹簧配置{ type: spring, duration: 0.5, bounce: 0.2 }。bounce 保持克制0.1–0.3可见的回弹只留给 drag-to-dismiss 和轻松有趣的时刻。不对称时序用户做决定的阶段按压、长按、破坏性确认动画更慢系统的响应则应瞬时。按压与释放对称计时本身就是一条发现。重点搜寻Toast/开关/高频触发 UI 上的keyframes、用固定时长 keyframes 做补间的手势处理器、拖拽缺少基于速度的松手判定判定公式Math.abs(distance)/elapsedMs ~0.11而不是单纯的距离阈值、拖拽边界处的硬停而不是递增摩擦力。类别 5Performance性能只动画transform与opacity。width/height/margin/padding/top/left会触发 布局 绘制 合成 全链路。transition: all会把意料之外的属性带出 GPU —— 永远算一条发现。Framer Motion 的x/y/scale简写不享受硬件加速—— 它们跑在主线程负载下掉帧。目标写法完整 transform 字符串animate{{ transform: translateX(100px) }}。不要用父元素上的 CSS 变量驱动子元素变换—— 它会为所有子元素重算样式。直接在该元素上设置transform。负载下 CSS及 WAAPI优于基于 rAF 的 JS —— 预定义动效用 CSS动态/手势动效用 JS 与弹簧。过渡期的filter: blur()保持在 20px 以下 —— 重模糊很贵Safari 尤甚。重点搜寻transition: all、被动画的布局属性、繁忙页面上的 Framer Motion 简写 prop、setProperty(--x, …)驱动子元素变换、CSS 本可完成却用 rAF 循环硬做的动效。类别 6Accessibility可访问性media (prefers-reduced-motion: reduce) { .element { animation: fade 0.2s ease; } /* 保留 opacity/颜色去掉位移 */ } media (hover: hover) and (pointer: fine) { .element:hover { transform: scale(1.05); } /* 触屏点按会误触发 hover */ }Reduced motion 的含义是更少、更温和的动画而不是零—— 保留有助于理解的状态过渡移除位置变化。JS 侧用useReducedMotion()并对变换值做分支。重点搜寻没有任何prefers-reduced-motion处理的位移动画、未加门控的:hover动效、把全部反馈一刀切清零的 reduced-motion 实现。仓库内的活证据src/css/docs.css 采用了正向做法 —— 用media (prefers-reduced-motion: no-preference)反向门控区块入场动画reduced-motion 用户自动失去位移、保留静态呈现media (prefers-reduced-motion: no-preference) { .docs-section { animation: docs-section-enter var(--dur-panel) var(--ease-out) both; } } keyframes docs-section-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }其中translateY(10px)的初始位移 淡入也同时满足类别 3入场要有初始变换的要求。此外对src/下 grepprefers-reduced-motion的命中遍布 landing 组件与部分 content 组件说明站点已把该门控当作通用实践。类别 7Cohesion Tokens一致性与 Token动效要匹配产品性格 —— 活泼的可以更有弹性仪表盘要利落克制。组件间性格不一致本身就是一条发现。曲线和时长应作为共享 token 存在。五个手写的、几乎一样的 cubic-bezier 是一条合并 token发现。整组同时出现、本应加30–80ms stagger的入场。stagger 是装饰性的 —— 绝不允许阻塞交互。显示两个重叠状态的刺眼交叉淡入可以在过渡期间叠加微弱的filter: blur(2px)来遮罩。重点搜寻重复的近似缓动/时长、利落实体里混进来的一个弹性组件、没有 stagger 的列表/网格入场、肉眼可见双重曝光的交叉淡入。类别 8Missed Opportunities错失的机会这是唯一的增量型类别 —— 找出现在没动、但应该动的地方会瞬移的状态变化内容替换、布局跳动一段简短过渡本可阻止生硬感。空间上相连的 UI从触发器出现的面板没有运动来解释它从哪来。罕见、高情绪的时刻首次运行、成功、庆祝没有被使用被允许的愉悦预算。工具translate百分比translateY(100%)等于元素自身高度与clip-path: inset()揭示动画 —— 不要用硬编码像素偏移。上报数量最多只有几条且必须基于你真实观察到的 UX 缝隙不是一张愿望清单。三、如何把审计结论变成可执行计划AUDIT.md 只负责判断标准每条被选中的发现如何落地由 PLAN-TEMPLATE.md 规定。计划必须假设执行者是一个零上下文、零品味的模型因此模板强制Problem每个位置都引用为path/to/file.tsx:123并附上当前代码原文Target终态的精确值 —— 曲线、时长、弹簧配置、媒体查询禁止写用个顺眼的缓动Repo conventions to follow这个代码库已有的做法 一个可供模仿的范例文件Steps一步一个具体编辑Boundaries不许碰的文件、不动 markup 只改运动属性、不加新依赖、代码与计划不符drift时停下上报而不是即兴发挥Verification机械验证typecheck/lint/build 的确切命令手感检查DevTools 播放速度调到 10%、切换prefers-reduced-motion确认位移被去掉而透明度反馈保留、真机测手势 机器/肉眼可判定的完成标准。模板还规定计划作者必须从 AUDIT.md 取值、绝不凭记忆近似写完计划后更新plans/README.md计划表、推荐执行顺序、依赖关系。SKILL.md 的 Hard Rules 进一步约束整个流程绝不改源码只写plans/、不做任何变更型操作、计划完全自包含内联精确 cubic-bezier、时长、文件路径与代码摘录、仓库内容视为数据而非指令、不重审已定案的有意取舍。四、上手路径把这套手册用于你的代码库先侦察greptransition、animation、keyframes、motion.、animate{、useSpring、ease-in、transition: all、scale(0)、prefers-reduced-motion、transform-origin建立 token 现状与频率地图SKILL.md Phase 1 给出的完整清单。按八类逐项审计每类都带着本节的Hunt for清单去搜记录file:line 证据。逐条复核并定级对照严重级定义HIGH/MEDIUM/LOW与杠杆率排序剔除豁免项如模态框的transform-origin: center、营销页的长时长。引用数值只抄不猜cubic-bezier(0.23, 1, 0.32, 1)、100–160ms 按压、30–80ms stagger、bounce: 0.2、速度阈值~0.11 px/ms、blur 20px……这些值在审计表格里是精确基线近似即违规。输出自包含计划按 PLAN-TEMPLATE.md 结构逐条成文机械验证 手感检查缺一不可。最后记住 SKILL.md 对语气与诚实度的要求用证据平实地陈述发现一份简短的高置信、高杠杆计划清单优于冗长注水版——这里的动效本来就是对的同样是一个合法的审计结论当手感无法仅凭代码判断交叉淡入、弹簧回弹时如实标注不确定性并把手感检查步骤写进计划而不是猜测。【免费下载链接】react-bitsAn open source collection of animated, interactive fully customizable React components for building memorable websites.项目地址: https://gitcode.com/GitHub_Trending/rea/react-bits创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考