CSS cubic-bezier()仅控制属性值随时间变化的速率，不改变运动路径；如配合translateX()或opacity使用，元素仍沿直线运动，无法实现弧线轨迹。
css cubic-bezier() 只控制时间节奏，不改变运动路径
很多人以为调 cubic-bezier(0.25, 0.46, 0.45, 0.94) 就能让元素画弧线，结果发现它只是「忽快忽慢地横着抖」——这是最常踩的坑。CSS 的 cubic-bezier() 本质是定义「属性值随时间变化的速率」，比如 transform: translateX() 或 opacity 怎么变，不是几何路径。
常见错误现象：
- 用
animation-timing-function: cubic-bezier(...)配合left/top动画，期待斜向曲线，实际仍是直线位移 - 误以为两个轴（
translateX和translateY）各自套不同缓动就能合成贝塞尔轨迹，结果轨迹是参数化折线或椭圆，不是真贝塞尔
ease、ease-in、ease-out、ease-in-out 对应的贝塞尔坐标
CSS 内置关键字其实是 cubic-bezier() 的简写，对应关系固定：
-
ease→cubic-bezier(0.25, 0.1, 0.25, 1.0)（先慢→快→慢） -
ease-in→cubic-bezier(0.42, 0, 1.0, 1.0)（从静止加速，无缓冲） -
ease-out→cubic-bezier(0, 0, 0.58, 1.0)（减速到停，有收尾缓冲） -
ease-in-out→cubic-bezier(0.42, 0, 0.58, 1.0)（对称缓入缓出）
这些坐标在 Safari、Chrome、Firefox 中行为一致；但 IE 完全不支持 cubic-bezier()，只认关键字。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
真正沿贝塞尔路径运动的三种可行方案
要让元素「走曲线」，必须脱离纯 CSS timing function，改用能描述几何路径的机制：
-
offset-path+offset-distance：用 SVG 路径或path()函数定义轨迹，再用offset-distance控制进度。Safari 15.4+ 支持，Chrome/Edge 已稳定，但旧版 Android WebView 和 IE 不可用 - Canvas 手动插值：用
bezierCurveTo()计算点坐标，配合requestAnimationFrame更新位置。完全可控，兼容性最好，但需自己管理动画循环和 easing - SVG
<animatemotion></animatemotion>：直接绑定<mpath></mpath>，天然支持三次贝塞尔路径。语义清晰，但 HTML 中嵌 SVG 较重，且部分老浏览器支持弱
自定义缓动函数如 easeOutSine 的实际用途
像 easeOutSine(x) 这类 JS 缓动函数，核心价值是「手动控制插值逻辑」，适用于需要精细时序干预的场景：
- 与
requestAnimationFrame搭配做逐帧动画，比如实现物理模拟中的阻尼回弹 - 配合 Canvas 或 WebGL 渲染非 DOM 元素（粒子、图表曲线），此时缓动决定的是数学坐标而非 CSS 属性
- 在不支持
offset-path的环境中，用它驱动transform: translate()的 X/Y 分量，虽不能生成真贝塞尔轨迹，但能逼近自然加速度变化
注意：easeOutSine 返回值范围是 [0, 1]，必须确保输入 x 在 [0, 1] 区间，否则 Math.sin() 会越界输出负值或大于 1 的数，导致位置跳变。
