在浏览器中即时运行此工具，无需注册且无需服务端处理。
工具信任状态
此工具的输入和输出会在当前浏览器中处理。
- 浏览器本地此工具的输入和输出会在当前浏览器中处理。
- 离线能力应用加载后，核心处理无需网络也可运行。
- 常规输入此工具未标记为敏感输入工具。
- 开发者工具检查使用工具时打开 Network 面板以验证请求。
喜欢这个工具？
安装 byteflow.tools 可更快启动，并离线访问浏览器本地工具。外部请求工具在执行查询操作时仍需要网络。
安装指南工具信任状态
此工具的输入和输出会在当前浏览器中处理。
喜欢这个工具？
安装 byteflow.tools 可更快启动，并离线访问浏览器本地工具。外部请求工具在执行查询操作时仍需要网络。
安装指南可视化并导出缓动曲线，让 CSS 过渡更平滑。
切换 播放 即可用当前曲线重新播放过渡。
创建和调整三次贝塞尔缓动曲线，以支持整个 UI 中一致的运动设计、交互反馈和动画行为。
它从交互式控制点生成有效的三次贝塞尔值。
它帮助比较悬停、进入、退出和注意力动画的缓动配置文件。
它使用可重用的缓动令牌标准化运动计时决策。
控制点
(0.22, 1, 0.36, 1)
快速曲线
(0.2, 0.8, 0.2, 1)
退出曲线
(0.4, 0, 1, 1)
CSS 缓动
过渡计时函数：三次贝塞尔曲线(0.22, 1, 0.36, 1);
Token 映射
--ease-out-expo: 三次贝塞尔曲线(0.16, 1, 0.3, 1);
运动注释
使用互补的进入和退出曲线来平衡交互节奏。
曲线过冲并且感觉不自然
将控制点调整为更接近标准缓出锚点。
不同组件的动画不一致
在整个设计系统中采用共享缓动令牌。
动画感觉迟缓
在适当的情况下将缓动更新与较短的持续时间配对。
退出和进入曲线冲突
为进入和退出定义不同方向的缓动对，而不是复用一条通用曲线。
如需了解统一的隐私术语、本地处理模式、外部请求标记和 DevTools 验证流程，请查看信任中心。
CSS 三次贝塞尔生成器 应作为交付流程中的快速校验步骤，在提交、发布和交接前都建议执行一次。
多少缓动代币足够？
大多数系统可以与一组紧凑的 4-8 个语义缓动标记配合良好。
一条曲线可以拟合每次交互吗？
通常不能；不同的交互类型受益于定制的缓动。
持续时间和缓动应该一起调整吗？
是的，缓动质量在很大程度上取决于所选的持续时间。
线性是一个好的选择吗？
线性对于持续进展很有用，但对于 UI 反馈动作不太自然。