react-bits 动画评审标准详解从频率决策、缓动曲线到 GPU 性能的完整数值手册【免费下载链接】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 这类以动画为核心卖点的组件库中动效做得动远远不够——动效必须在正确的频率下出现、以正确的曲线和时长运行、并且不拖慢渲染管线。仓库中的 STANDARDS.md 就是一份动画评审的精确数值参考手册蒸馏自 Emil Kowalski 的设计工程哲学它规定了每一条动画在 code review 中应被引用的具体曲线、时长与规则。读完本篇你将掌握一套可直接落地的动效决策流程何时该删掉动画、该选哪条 cubic-bezier、时长预算给多少、以及如何在transform/opacity与 springs 之间做出正确的技术选型。这套标准在仓库中的定位STANDARDS.md 位于AGENTS/SKILLS/review-animations/目录下与同目录的 SKILL.md 配套使用后者定义了评审行为姿态默认标记问题、批准是靠争取的前者则提供评审所需的全部精确数值——在结论中引用这些值而不是靠估算。更值得注意的是这套标准不是纸面规范react-bits 自身的样式系统就采用了其中定义的自定义缓动曲线。在 variables.css 中可以看到三组曲线 token 与四个时长 token 的定义/* 自定义强缓动曲线与 STANDARDS.md 完全一致 */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* 强 ease-out用于 UI */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* 强 ease-in-out用于屏幕内位移 */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS 风格的抽屉曲线 */ /* 时长预算 token */ --dur-press: 120ms; --dur-tooltip: 160ms; --dur-menu: 200ms; --dur-panel: 280ms;四个时长 token 正好落在下文时长预算表格的区间内按钮按压 100–160ms、菜单 150–250ms、面板 200–500ms且全部 ≤ 300ms 的 UI 上限。搜索仓库源码可以发现transform var(--dur-press) var(--ease-out)这一组合被大量组件复用例如 IconSelect.jsx、ComponentList.jsx、TabsLayout.jsx 以及 OpenInStudioButton.jsx 等说明按压反馈 短时长 强 ease-out transform是仓库内统一执行的实践。页面级转场 transitions.css 则只动opacitytransition: opacity 300ms var(--ease-out)同样只触及 GPU 合成属性。该不该做动画频率决策表STANDARDS.md 的第一原则是按用户看到该动效的频率决定做不做频率决策每天 100 次键盘快捷键、命令面板开关永远不做动画每天十几次hover 效果、列表导航删除或大幅削弱偶尔模态框、抽屉、toast标准动画罕见/首次onboarding、反馈、庆祝时刻可以加入惊喜感永远不要为键盘触发的动作加动画——它们一天重复上百次动画只会让它们显得迟钝、脱节。文档举的例子是 Raycast 的命令面板没有开/关动画这对每天使用数百次的工具来说是正确的。动效的合法目的只有五类空间一致性spatial consistency、状态指示、解释说明、反馈、防止突兀变化。看起来酷用于高频出现的元素不构成合法理由。缓动决策顺序与自定义曲线文档给出了一条明确的缓动选择决策顺序进入或退出entering/exiting→ease-out起步快感觉响应迅速屏幕内移动/形变 →ease-in-outhover/颜色变化 →ease恒速运动跑马灯、进度条→linear默认 →ease-out两条硬规则UI 上永远不用ease-in——它起步慢恰好拖慢了用户最关注的那个瞬间同一时长下ease-out200ms 的感觉速度快于ease-in200ms。以及内置 CSS 缓动太弱要认真做动效必须使用强自定义曲线即上文 variables.css 中的三条 cubic-bezier。文档同时建议从在线缓动曲线工具如 easing.dev、easings.co 这类曲线库获取曲线不要从零手写。时长预算UI 动画保持在 300ms 以内元素时长按钮按压反馈100–160msTooltip、小型 popover125–200ms下拉菜单、select150–250ms模态框、抽屉200–500ms营销/解释性动画可以更长核心规则是UI 动画保持在 300ms 以内一个 180ms 的下拉菜单比 400ms 的更有响应感同样实际的等待时间更快的 loading 动画会让加载本身感觉更快首次出现之后的 tooltip 跳过延迟和动画直接显示会让工具栏整体感觉更快。react-bits 的 token 设计--dur-press: 120ms、--dur-tooltip: 160ms、--dur-menu: 200ms正是这张预算表的具体化。物理感起点、原点与按压反馈永远不用scale(0)。应该从scale(0.9–0.97)opacity: 0开始——真实世界里没有东西是从虚无中凭空出现的。Popover 要有原点感知origin-aware。缩放应从触发元素处发生而非元素中心.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适用于一切可按压元素。仓库内该模式的实际形态是transform var(--dur-press) var(--ease-out)120ms 落在 100–160ms 预算内配合scale类的按压位移可以在 ComponentList.jsx 和 CTA.css 等文件中找到一致的实现。弹簧Springs模拟物理、无固定时长弹簧动画因为模拟物理而显得自然没有固定时长而是根据参数落定。适用场景带惯性的拖拽、活的元素如 Dynamic Island、可中断的手势、装饰性鼠标跟随。// Apple 风格更易推理—— 推荐 { type: spring, duration: 0.5, bounce: 0.2 } // 传统物理参数控制更细 { type: spring, mass: 1, stiffness: 100, damping: 10 }要点bounce 保持克制0.1–0.3大部分 UI 避免回弹只留给 drag-to-dismiss 和俏皮交互弹簧在中断时会保留速度keyframes 则从零重启因此对用户可能中途反向操作的手势是首选。鼠标交互用useSpring做插值而不是把值直接绑定到鼠标坐标——直接绑定没有惯性、显得生硬。而且这仅适用于装饰性运动。可中断性transitions 对 keyframesCSStransitions可以在动画中途被中断并重新定向keyframes则会从零重启。对快速触发的一切toast 连续添加、开关切换transitions 更平滑/* 可中断 —— 适合动态 UI */ .toast { transition: transform 400ms ease; } /* 不可中断 —— 动态 UI 避免使用 */ keyframes slideIn { from { transform: translateY(100%); } to { transform: translateY(0); } }纯 CSS 实现进入动画无需 JS用starting-style.toast { opacity: 1; transform: translateY(0); transition: opacity 400ms ease, transform 400ms ease; starting-style { opacity: 0; transform: translateY(100%); } }旧环境降级方案useEffect(() setMounted(true), [])data-mounted属性。不对称时序决定慢、响应快用户在做决定的地方慢系统响应的地方快.overlay { transition: clip-path 200ms ease-out; } /* 释放快 */ .button:active .overlay { transition: clip-path 2s linear; } /* 按压慢而刻意 */对按压—释放、长按这类交互进入/退出时序对称是一个评审问题。性能只在 GPU 上动 transform 与 opacity只动画transform和opacity——它们跳过 layout/paint走 GPU 合成。padding/margin/height/width/top/left会触发全部三个渲染阶段。不要用父元素上的 CSS 变量驱动子元素 transform——它会让所有子元素重算样式。直接把transform设在元素上element.style.setProperty(--swipe-amount, ${d}px); // 差所有子元素重算 element.style.transform translateY(${d}px); // 好只影响这个元素Framer Motion 的简写属性不是硬件加速的。x/y/scale走主线程 rAF页面繁忙时会掉帧。要用完整 transform 字符串motion.div animate{{ x: 100 }} / // 繁忙时掉帧 motion.div animate{{ transform: translateX(100px) }} / // 硬件加速高负载下 CSS 动画胜过 JS——CSS 在主线程之外运行而基于 rAF 的动画会在浏览器加载/脚本/绘制时卡顿。预定动作predetermined motion用 CSS动态/可中断的用 JS。WAAPI同时提供 JS 控制与 CSS 级性能硬件加速、可中断、无依赖库element.animate([{ clipPath: inset(0 0 100% 0) }, { clipPath: inset(0 0 0 0) }], { duration: 1000, fill: forwards, easing: cubic-bezier(0.77, 0, 0.175, 1) });Transform 与 clip-path被低估的工具箱translate的百分比相对元素自身尺寸——translateY(100%)移动的距离就是元素自身高度与具体像素无关Sonner/Vaul 就是这样定位 toast/抽屉的。优先于硬编码 px。scale()会连带缩放子内容字体、图标——对按压反馈而言这正是特性。3DrotateX/Ytransform-style: preserve-3d可以在不用 JS 的情况下实现深度/环绕/翻转。clip-path: inset(t r b l)是强力的动画工具每个值从对应方向吃掉滚动显现inset(0 0 100% 0)→inset(0 0 0 0)、长按删除遮罩、无缝的 tab 颜色过渡复制一份再裁剪活动副本、对比滑块。手势与拖拽像真实物体一样响应基于速度的惯性关闭不要要求拖过距离阈值——计算速度Math.abs(distance)/elapsedMs大于约0.11即关闭。一次 flick 就应该足够。边界阻尼damping越过自然边界继续拖时拖得越远移动越少——真实物体在停下前会减速。Pointer capture拖拽开始后捕获指针指针移出边界后拖拽仍然继续。多点触控保护拖拽开始后忽略额外的触点if (isDragging) return防止位置跳变。用摩擦代替硬墙——允许过冲over-drag并伴随阻力递增而不是一堵看不见的墙。用模糊掩盖不完美的交叉淡入淡出即使调遍了缓动和时长crossfade 仍然显示出两个重叠状态时在过渡期间叠加轻微的filter: blur(2px)把两个状态融合成一次被感知的单一形变。注意 blur 保持在20px 以下——重模糊非常昂贵在 Safari 上尤其如此。错峰进场Stagger成组进入要错峰条目间隔30–80ms更长的延迟只会显得慢。Stagger 是装饰性的——永远不要在它播放时阻塞交互.item { opacity: 0; transform: translateY(8px); animation: fadeIn 300ms ease-out forwards; } .item:nth-child(2) { animation-delay: 50ms; } .item:nth-child(3) { animation-delay: 100ms; } keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }可访问性更少更柔和而不是零media (prefers-reduced-motion: reduce) { .element { animation: fade 0.2s ease; } /* 保留 opacity/颜色去掉 transform 位移 */ } media (hover: hover) and (pointer: fine) { .element:hover { transform: scale(1.05); } /* 门控 hover 动效——触屏会在点击时触发伪 hover */ }const reduce useReducedMotion(); const closedX reduce ? 0 : -100%;Reduced motion 的含义是更少、更柔和的动画而不是完全没有保留有助于理解的过渡透明度、颜色移除位移/位置变化。仓库中大量组件页面如 Plasma.jsx、DepthText.css 等都包含prefers-reduced-motion处理分支可搜索prefers-reduced-motion查看覆盖面。调试手段感觉不对时怎么办慢放把时长放大 2–5 倍或用 DevTools 的 animation inspector。检查颜色是否干净地交叉淡化、缓动是否突然中止、transform-origin是否正确、联动属性是否保持同步。逐帧检查Chrome DevTools 的 Animations 面板能暴露联动属性之间的时间漂移。真机手势类抽屉、滑动手势必须连手机、通过 IP 访问开发服务器、用 Safari 远程调试来验证。第二天再看开发当下看不出的瑕疵次日的新眼睛会立刻发现。整体感Cohesion动效要匹配组件性格动效要与组件性格一致俏皮的产品可以更弹专业仪表盘应该干净利落、干脆快速。Sonner 之所以感觉对部分原因在于它的缓动、时长、设计甚至名字彼此协调——刻意略慢、用ease而非ease-out以获得优雅感。至于进入/退出列表中 opacity height 的组合没有公式只能靠试错调到感觉对为止。配套评审技能如何把这些标准变成可执行的 Block/ApproveSKILL.md 定义了如何使用这份标准做评审十条不可妥协的标准有目的的动效、频率匹配、响应式缓动、300ms 以内 UI、原点与物理正确性、可中断性、仅 GPU 属性、可访问性、不对称进出、整体感一组看到即标记的升级触发器transition: all、UI 上的ease-in、高频动作上的动画、动画化的布局属性、Framer Motion 简写属性、缺失prefers-reduced-motion等以及一个修复优先级阶梯删掉动画高频/无目的/键盘触发→ 2. 削弱它 → 3. 修缓动 → 4. 修原点/物理性 → 5. 改成可中断 → 6. 移到 GPU → 7. 不对称时序 → 8. 打磨模糊遮罩、stagger、starting-style、弹簧→ 9. 可访问性与整体感。输出格式也是固定的一张 Before/After/Why 的发现表格加上按影响分层的结论感觉崩坏 错失的简化 性能 可中断与时序 原点/物理/整体感 可访问性最后给出明确的Block或Approve决定——需要精确数值曲线、时长、弹簧配置时一律从 STANDARDS.md 引用而非估算。同仓库的 AUDIT.md 还提供了同一套标准的审计视角版本八个审计类别各自附带重点排查什么的清单可作为对既有代码库做动效体检时的操作手册。小结这份标准的价值在于把动效好不好从主观品味问题变成了可引用、可验证的工程问题频率表决定做不做决策顺序 三条强 cubic-bezier 决定怎么动预算表决定动多久transitions/弹簧/starting-style决定可否被打断transform/opacity WAAPI 决定不掉帧最后由prefers-reduced-motion与组件性格兜底。对 react-bits 这样的动画组件库而言这套数值手册既是评审基准也是仓库自身样式 token见 variables.css背后的设计依据——照着它执行感觉对就有了可复制的工程路径。【免费下载链接】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 动画评审标准详解：从频率决策、缓动曲线到 GPU 性能的完整数值手册
react-bits 动画评审标准详解从频率决策、缓动曲线到 GPU 性能的完整数值手册【免费下载链接】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 这类以动画为核心卖点的组件库中动效做得动远远不够——动效必须在正确的频率下出现、以正确的曲线和时长运行、并且不拖慢渲染管线。仓库中的 STANDARDS.md 就是一份动画评审的精确数值参考手册蒸馏自 Emil Kowalski 的设计工程哲学它规定了每一条动画在 code review 中应被引用的具体曲线、时长与规则。读完本篇你将掌握一套可直接落地的动效决策流程何时该删掉动画、该选哪条 cubic-bezier、时长预算给多少、以及如何在transform/opacity与 springs 之间做出正确的技术选型。这套标准在仓库中的定位STANDARDS.md 位于AGENTS/SKILLS/review-animations/目录下与同目录的 SKILL.md 配套使用后者定义了评审行为姿态默认标记问题、批准是靠争取的前者则提供评审所需的全部精确数值——在结论中引用这些值而不是靠估算。更值得注意的是这套标准不是纸面规范react-bits 自身的样式系统就采用了其中定义的自定义缓动曲线。在 variables.css 中可以看到三组曲线 token 与四个时长 token 的定义/* 自定义强缓动曲线与 STANDARDS.md 完全一致 */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* 强 ease-out用于 UI */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* 强 ease-in-out用于屏幕内位移 */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS 风格的抽屉曲线 */ /* 时长预算 token */ --dur-press: 120ms; --dur-tooltip: 160ms; --dur-menu: 200ms; --dur-panel: 280ms;四个时长 token 正好落在下文时长预算表格的区间内按钮按压 100–160ms、菜单 150–250ms、面板 200–500ms且全部 ≤ 300ms 的 UI 上限。搜索仓库源码可以发现transform var(--dur-press) var(--ease-out)这一组合被大量组件复用例如 IconSelect.jsx、ComponentList.jsx、TabsLayout.jsx 以及 OpenInStudioButton.jsx 等说明按压反馈 短时长 强 ease-out transform是仓库内统一执行的实践。页面级转场 transitions.css 则只动opacitytransition: opacity 300ms var(--ease-out)同样只触及 GPU 合成属性。该不该做动画频率决策表STANDARDS.md 的第一原则是按用户看到该动效的频率决定做不做频率决策每天 100 次键盘快捷键、命令面板开关永远不做动画每天十几次hover 效果、列表导航删除或大幅削弱偶尔模态框、抽屉、toast标准动画罕见/首次onboarding、反馈、庆祝时刻可以加入惊喜感永远不要为键盘触发的动作加动画——它们一天重复上百次动画只会让它们显得迟钝、脱节。文档举的例子是 Raycast 的命令面板没有开/关动画这对每天使用数百次的工具来说是正确的。动效的合法目的只有五类空间一致性spatial consistency、状态指示、解释说明、反馈、防止突兀变化。看起来酷用于高频出现的元素不构成合法理由。缓动决策顺序与自定义曲线文档给出了一条明确的缓动选择决策顺序进入或退出entering/exiting→ease-out起步快感觉响应迅速屏幕内移动/形变 →ease-in-outhover/颜色变化 →ease恒速运动跑马灯、进度条→linear默认 →ease-out两条硬规则UI 上永远不用ease-in——它起步慢恰好拖慢了用户最关注的那个瞬间同一时长下ease-out200ms 的感觉速度快于ease-in200ms。以及内置 CSS 缓动太弱要认真做动效必须使用强自定义曲线即上文 variables.css 中的三条 cubic-bezier。文档同时建议从在线缓动曲线工具如 easing.dev、easings.co 这类曲线库获取曲线不要从零手写。时长预算UI 动画保持在 300ms 以内元素时长按钮按压反馈100–160msTooltip、小型 popover125–200ms下拉菜单、select150–250ms模态框、抽屉200–500ms营销/解释性动画可以更长核心规则是UI 动画保持在 300ms 以内一个 180ms 的下拉菜单比 400ms 的更有响应感同样实际的等待时间更快的 loading 动画会让加载本身感觉更快首次出现之后的 tooltip 跳过延迟和动画直接显示会让工具栏整体感觉更快。react-bits 的 token 设计--dur-press: 120ms、--dur-tooltip: 160ms、--dur-menu: 200ms正是这张预算表的具体化。物理感起点、原点与按压反馈永远不用scale(0)。应该从scale(0.9–0.97)opacity: 0开始——真实世界里没有东西是从虚无中凭空出现的。Popover 要有原点感知origin-aware。缩放应从触发元素处发生而非元素中心.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适用于一切可按压元素。仓库内该模式的实际形态是transform var(--dur-press) var(--ease-out)120ms 落在 100–160ms 预算内配合scale类的按压位移可以在 ComponentList.jsx 和 CTA.css 等文件中找到一致的实现。弹簧Springs模拟物理、无固定时长弹簧动画因为模拟物理而显得自然没有固定时长而是根据参数落定。适用场景带惯性的拖拽、活的元素如 Dynamic Island、可中断的手势、装饰性鼠标跟随。// Apple 风格更易推理—— 推荐 { type: spring, duration: 0.5, bounce: 0.2 } // 传统物理参数控制更细 { type: spring, mass: 1, stiffness: 100, damping: 10 }要点bounce 保持克制0.1–0.3大部分 UI 避免回弹只留给 drag-to-dismiss 和俏皮交互弹簧在中断时会保留速度keyframes 则从零重启因此对用户可能中途反向操作的手势是首选。鼠标交互用useSpring做插值而不是把值直接绑定到鼠标坐标——直接绑定没有惯性、显得生硬。而且这仅适用于装饰性运动。可中断性transitions 对 keyframesCSStransitions可以在动画中途被中断并重新定向keyframes则会从零重启。对快速触发的一切toast 连续添加、开关切换transitions 更平滑/* 可中断 —— 适合动态 UI */ .toast { transition: transform 400ms ease; } /* 不可中断 —— 动态 UI 避免使用 */ keyframes slideIn { from { transform: translateY(100%); } to { transform: translateY(0); } }纯 CSS 实现进入动画无需 JS用starting-style.toast { opacity: 1; transform: translateY(0); transition: opacity 400ms ease, transform 400ms ease; starting-style { opacity: 0; transform: translateY(100%); } }旧环境降级方案useEffect(() setMounted(true), [])data-mounted属性。不对称时序决定慢、响应快用户在做决定的地方慢系统响应的地方快.overlay { transition: clip-path 200ms ease-out; } /* 释放快 */ .button:active .overlay { transition: clip-path 2s linear; } /* 按压慢而刻意 */对按压—释放、长按这类交互进入/退出时序对称是一个评审问题。性能只在 GPU 上动 transform 与 opacity只动画transform和opacity——它们跳过 layout/paint走 GPU 合成。padding/margin/height/width/top/left会触发全部三个渲染阶段。不要用父元素上的 CSS 变量驱动子元素 transform——它会让所有子元素重算样式。直接把transform设在元素上element.style.setProperty(--swipe-amount, ${d}px); // 差所有子元素重算 element.style.transform translateY(${d}px); // 好只影响这个元素Framer Motion 的简写属性不是硬件加速的。x/y/scale走主线程 rAF页面繁忙时会掉帧。要用完整 transform 字符串motion.div animate{{ x: 100 }} / // 繁忙时掉帧 motion.div animate{{ transform: translateX(100px) }} / // 硬件加速高负载下 CSS 动画胜过 JS——CSS 在主线程之外运行而基于 rAF 的动画会在浏览器加载/脚本/绘制时卡顿。预定动作predetermined motion用 CSS动态/可中断的用 JS。WAAPI同时提供 JS 控制与 CSS 级性能硬件加速、可中断、无依赖库element.animate([{ clipPath: inset(0 0 100% 0) }, { clipPath: inset(0 0 0 0) }], { duration: 1000, fill: forwards, easing: cubic-bezier(0.77, 0, 0.175, 1) });Transform 与 clip-path被低估的工具箱translate的百分比相对元素自身尺寸——translateY(100%)移动的距离就是元素自身高度与具体像素无关Sonner/Vaul 就是这样定位 toast/抽屉的。优先于硬编码 px。scale()会连带缩放子内容字体、图标——对按压反馈而言这正是特性。3DrotateX/Ytransform-style: preserve-3d可以在不用 JS 的情况下实现深度/环绕/翻转。clip-path: inset(t r b l)是强力的动画工具每个值从对应方向吃掉滚动显现inset(0 0 100% 0)→inset(0 0 0 0)、长按删除遮罩、无缝的 tab 颜色过渡复制一份再裁剪活动副本、对比滑块。手势与拖拽像真实物体一样响应基于速度的惯性关闭不要要求拖过距离阈值——计算速度Math.abs(distance)/elapsedMs大于约0.11即关闭。一次 flick 就应该足够。边界阻尼damping越过自然边界继续拖时拖得越远移动越少——真实物体在停下前会减速。Pointer capture拖拽开始后捕获指针指针移出边界后拖拽仍然继续。多点触控保护拖拽开始后忽略额外的触点if (isDragging) return防止位置跳变。用摩擦代替硬墙——允许过冲over-drag并伴随阻力递增而不是一堵看不见的墙。用模糊掩盖不完美的交叉淡入淡出即使调遍了缓动和时长crossfade 仍然显示出两个重叠状态时在过渡期间叠加轻微的filter: blur(2px)把两个状态融合成一次被感知的单一形变。注意 blur 保持在20px 以下——重模糊非常昂贵在 Safari 上尤其如此。错峰进场Stagger成组进入要错峰条目间隔30–80ms更长的延迟只会显得慢。Stagger 是装饰性的——永远不要在它播放时阻塞交互.item { opacity: 0; transform: translateY(8px); animation: fadeIn 300ms ease-out forwards; } .item:nth-child(2) { animation-delay: 50ms; } .item:nth-child(3) { animation-delay: 100ms; } keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }可访问性更少更柔和而不是零media (prefers-reduced-motion: reduce) { .element { animation: fade 0.2s ease; } /* 保留 opacity/颜色去掉 transform 位移 */ } media (hover: hover) and (pointer: fine) { .element:hover { transform: scale(1.05); } /* 门控 hover 动效——触屏会在点击时触发伪 hover */ }const reduce useReducedMotion(); const closedX reduce ? 0 : -100%;Reduced motion 的含义是更少、更柔和的动画而不是完全没有保留有助于理解的过渡透明度、颜色移除位移/位置变化。仓库中大量组件页面如 Plasma.jsx、DepthText.css 等都包含prefers-reduced-motion处理分支可搜索prefers-reduced-motion查看覆盖面。调试手段感觉不对时怎么办慢放把时长放大 2–5 倍或用 DevTools 的 animation inspector。检查颜色是否干净地交叉淡化、缓动是否突然中止、transform-origin是否正确、联动属性是否保持同步。逐帧检查Chrome DevTools 的 Animations 面板能暴露联动属性之间的时间漂移。真机手势类抽屉、滑动手势必须连手机、通过 IP 访问开发服务器、用 Safari 远程调试来验证。第二天再看开发当下看不出的瑕疵次日的新眼睛会立刻发现。整体感Cohesion动效要匹配组件性格动效要与组件性格一致俏皮的产品可以更弹专业仪表盘应该干净利落、干脆快速。Sonner 之所以感觉对部分原因在于它的缓动、时长、设计甚至名字彼此协调——刻意略慢、用ease而非ease-out以获得优雅感。至于进入/退出列表中 opacity height 的组合没有公式只能靠试错调到感觉对为止。配套评审技能如何把这些标准变成可执行的 Block/ApproveSKILL.md 定义了如何使用这份标准做评审十条不可妥协的标准有目的的动效、频率匹配、响应式缓动、300ms 以内 UI、原点与物理正确性、可中断性、仅 GPU 属性、可访问性、不对称进出、整体感一组看到即标记的升级触发器transition: all、UI 上的ease-in、高频动作上的动画、动画化的布局属性、Framer Motion 简写属性、缺失prefers-reduced-motion等以及一个修复优先级阶梯删掉动画高频/无目的/键盘触发→ 2. 削弱它 → 3. 修缓动 → 4. 修原点/物理性 → 5. 改成可中断 → 6. 移到 GPU → 7. 不对称时序 → 8. 打磨模糊遮罩、stagger、starting-style、弹簧→ 9. 可访问性与整体感。输出格式也是固定的一张 Before/After/Why 的发现表格加上按影响分层的结论感觉崩坏 错失的简化 性能 可中断与时序 原点/物理/整体感 可访问性最后给出明确的Block或Approve决定——需要精确数值曲线、时长、弹簧配置时一律从 STANDARDS.md 引用而非估算。同仓库的 AUDIT.md 还提供了同一套标准的审计视角版本八个审计类别各自附带重点排查什么的清单可作为对既有代码库做动效体检时的操作手册。小结这份标准的价值在于把动效好不好从主观品味问题变成了可引用、可验证的工程问题频率表决定做不做决策顺序 三条强 cubic-bezier 决定怎么动预算表决定动多久transitions/弹簧/starting-style决定可否被打断transform/opacity WAAPI 决定不掉帧最后由prefers-reduced-motion与组件性格兜底。对 react-bits 这样的动画组件库而言这套数值手册既是评审基准也是仓库自身样式 token见 variables.css背后的设计依据——照着它执行感觉对就有了可复制的工程路径。【免费下载链接】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），仅供参考