transition无法实现轨迹感移动，因其仅支持直线位移；真正可行的是@keyframes配合transform逐帧定义位置，或用requestAnimationFrame、SVG path实现复杂路径。
transition 无法直接实现轨迹感移动
用 transition 配合 left/top 只能做直线位移，哪怕你分多段写，浏览器仍按两点间插值计算——它不知道“弧线”“贝塞尔路径”或“绕圈”，只会从起点 A 直线滑到终点 B。所谓“轨迹感”，本质是位置随时间非线性变化，而 transition 的缓动函数（如 cubic-bezier(0.4, 0, 0.2, 1)）只控制速度节奏，不改变运动方向。
常见错误现象：
– 写了 left: 100px; top: 50px; → left: 200px; top: 150px;，期望走斜线再拐弯，结果还是直线
– 尝试用多个 class 切换 + transition 分段，但视觉上仍是生硬折线，没有平滑曲率
真正可行的方案只有 CSS @keyframes + transform
transform 支持 translate()、rotate()、scale() 等组合，配合 @keyframes 可以逐帧定义位置，从而模拟任意轨迹。关键点在于：必须用 transform: translate() 替代 left/top，否则会触发重排，动画卡顿且无法硬件加速。
实操建议：
– 动画容器需设 position: relative 或 absolute，但圆点自身用 position: absolute + transform
– 每个 @keyframes 关键帧里只改 transform: translate(x, y)，别混用 left
– 若需循环轨迹（如绕圆），可用三角函数预计算坐标，或直接写近似贝塞尔路径
立即学习“前端免费学习笔记（深入）”；
简短示例：
div.dot {
position: absolute;
width: 8px;
height: 8px;
background: #333;
border-radius: 50%;
animation: orbit 3s ease-in-out infinite;
}
@keyframes orbit {
0% { transform: translate(0, 0); }
25% { transform: translate(100px, 0); }
50% { transform: translate(100px, 100px); }
75% { transform: translate(0, 100px); }
100% { transform: translate(0, 0); }
}
想让轨迹更自然？避开 cubic-bezier 的认知陷阱
很多人以为调一个“好看”的 cubic-bezier() 就能做出曲线运动，其实不能。这个函数只决定“快慢分布”，比如开头慢→中间快→结尾慢，但它不改变位移向量方向。你看到的“弧线感”，其实是靠多段 transform 关键帧拼出来的视觉错觉，或者用 JS 实时计算坐标后注入 style。
容易踩的坑：
– 在 @keyframes 里写太多关键帧（如每 1% 一帧），增加 CSS 解析负担，无实际收益
– 混用 transform 和 left/top，导致浏览器降级到软件渲染
– 忘记给元素加 will-change: transform（尤其在低性能设备上，动画易掉帧）
复杂轨迹建议交给 requestAnimationFrame 或 SVG path
如果轨迹是动态生成的（比如鼠标跟随、数据驱动的波形路径），纯 CSS 不够用。requestAnimationFrame 能精准控制每一帧的 transform 值；SVG 的 <animateMotion> 更直接支持沿 <path> 移动，且兼容性已覆盖所有现代浏览器。
实操建议：
– 简单固定轨迹：CSS @keyframes 足够，维护成本最低
– 轨迹需响应用户输入或实时数据：用 JS 计算坐标，批量更新 style.transform
– 要求高精度路径（如心形、螺旋、地图路线）：优先选 SVG + <path>，避免 JS 插值误差
最后提醒：所有“轨迹感”的核心，是位置坐标随时间的非线性映射。CSS 不提供内置函数做这个映射，你得自己算好每一步该在哪——这点最容易被忽略。
