CSS动画中animation-timing-function仅控制速度，无法定义路径形状；需用CSS变量配合transform:translate()动态更新位置，通过JS或calc()驱动坐标，实现自定义轨迹运动。
animation-timing-function 无法控制路径形状，得换思路
CSS 动画的 animation-timing-function 只能调节速度曲线（快慢节奏），不能定义元素在二维空间里怎么拐弯、绕圈或走贝塞尔路径。想让元素沿自定义轨迹运动，核心不是调速，而是用 transform: translate() 动态更新位置，而坐标得从外部传进来——这时 css custom property（即 CSS 变量）就是最轻量的“数据管道”。
- 常见错误：写一堆
@keyframes帧去硬编码translate(10px, 20px)→ 轨迹一变就得重写动画，不可维护 - 真正可行的路：把路径拆成时间序列的
--x和--y值，用 JS 或 calc() 驱动，CSS 只负责消费 - 兼容性注意：
calc()中使用 CSS 变量需浏览器支持（Chrome 49+、Firefox 40+、Safari 9.1+），IE 全线不支持
用 calc() + CSS 变量实现贝塞尔路径采样
贝塞尔曲线本身不能直接塞进 CSS，但可以用三次贝塞尔函数公式，在 calc() 里手动展开，配合变量做参数化控制。关键在于把时间 t（0→1）映射为 --x 和 --y 的实时值。
- 假设你有一条 cubic-bezier(0.25, 0.1, 0.25, 1)，对应控制点 P₀(0,0)、P₁(0.25,0.1)、P₂(0.25,1)、P₃(1,1)，那么 x(t) = (1−t)³×0 + 3(1−t)²t×0.25 + 3(1−t)t²×0.25 + t³×1，y(t) 同理
- 实际中不用手算，用 JS 预生成一组
t值（比如 0, 0.1, ..., 1.0），输出对应--x/--y，再用@keyframes引用这些变量 - 示例片段：
@keyframes follow-path { 0% { transform: translate(calc(var(--x-0) * 100px), calc(var(--y-0) * 100px)); } 10% { transform: translate(calc(var(--x-1) * 100px), calc(var(--y-1) * 100px)); } /* ... */ 100% { transform: translate(calc(var(--x-10) * 100px), calc(var(--y-10) * 100px)); } }
JS 驱动时，用 requestAnimationFrame 更新 CSS 变量最稳
如果路径是动态的（比如鼠标跟随、数据驱动位移），靠纯 CSS keyframes 就不够用了。此时必须用 JS 控制变量更新节奏，而 requestAnimationFrame 是唯一能对齐屏幕刷新率的方式——比 setTimeout 或 CSS animation-duration 更准、更顺。
- 别直接改
element.style.setProperty('--x', xVal)然后等下一帧渲染：频繁触发 layout/reflow 会卡顿 - 正确做法：把所有变量更新集中到一次
requestAnimationFrame回调里，且只设变量，不动 DOM 结构 - 性能陷阱：每帧都调用
getComputedStyle读取变量值 → 触发强制同步布局，直接拖垮帧率；应缓存初始值或用 JS 自己算 - 小技巧：用
transition: --x 0.016s linear, --y 0.016s linear搭配 JS 更新，可省掉@keyframes，但仅适用于简单插值
SVG path 转 CSS 轨迹时，坐标的单位和缩放最容易翻车
很多人想把 SVG 的 d 属性直接喂给 CSS，结果元素飞出视口或缩成一个点。根本原因是 SVG 坐标系默认无单位，而 CSS 的 translate() 默认是 px；且 SVG viewbox、path 的 transform、CSS 容器的 scale() 全部叠加后，坐标就乱套了。
立即学习“前端免费学习笔记（深入）”；
- 务必统一基准：导出路径前，先用 JS 把 SVG
getPointAtLength()的返回值归一化到 [0,1] 区间，再乘以目标容器宽高 - 避免在 CSS 里写
transform: scale(2) translate(var(--x), var(--y))→scale会影响translate的像素解释，应把缩放逻辑提前算进--x/--y - 调试技巧：临时加
outline: 1px solid red到动画元素，再用 DevTools 实时修改--x值，看是否按预期偏移
CSS 变量传路径这事，难点不在语法，而在坐标系统的隐式转换——SVG、viewport、transform-origin、scroll 位置，任何一层没对齐，元素就会“失踪”。动手前，先用 JS 打印出你认为的 --x 值和实际渲染位置的差值，比反复调 keyframes 有用得多。
