animation-timeline 不适用于拖拽过渡，因其仅支持 scroll()、view() 和 customtimeline 等单向连续时间源，而拖拽是离散、双向、事件驱动的，无法映射为归一化进度；应改用 transition + js 实时更新 transform。
animation-timeline 不能驱动基于手势的拖拽过渡。 它只支持时间线（Timeline）类型的进度源，目前规范中明确支持的只有 scroll()、view() 和自定义 CustomTimeline（需 JS 实现），但不包括触摸/鼠标拖拽这类事件驱动的、非单调递增的、用户实时干预的时间流。
为什么 animation-timeline 不适用于拖拽场景
拖拽行为本质是离散事件（mousedown/touchstart → 持续 mousemove/touchmove → mouseup/touchend），其位移值可正可负、可跳变、可暂停，而 animation-timeline 所依赖的时间线必须是单向、连续、可映射为归一化进度（0–1）的抽象时间源。浏览器无法将任意 DOM 元素的 transform: translateX() 实时值自动转换成一个合法 timeline 的当前时间。
-
scroll()时间线依赖scrollTop或scrollLeft，它们天然单调递增（滚动不可逆）且有明确定义的起止范围 -
view()时间线依赖元素在视口中的几何可见比例，也是连续、有界、可计算的 - 拖拽坐标（如
clientX）没有内置“总长度”或“起始/结束锚点”，浏览器无从推导0%和100%对应什么 - 即便用
CustomTimeline手动实现，也需在 JS 中持续调用timeline.currentTime = ...，此时已退化为传统 requestAnimationFrame + transform 控制，失去声明式优势
想实现拖拽过渡，该用什么
真正适合拖拽过渡的是 transition 配合属性变更，或 transform + will-change + 手动 JS 更新。以下是最常用且可靠的做法：
- 给目标元素设
transition: transform 0.2s ease-out，然后在touchmove中直接设置element.style.transform = `translateX(${x}px)` - 避免在拖拽中使用
animation，因为animation会覆盖transition，且无法响应实时坐标 - 若需回弹/吸附效果（如拖一半松手自动归位），用
transition+ 状态切换（例如加 class 触发不同终点）比动画更可控 - 对性能敏感场景，用
transform+will-change: transform，并确保不触发重排（别用left、top、margin）
误用 animation-timeline 的典型错误现象
有人尝试写类似这样的代码，结果完全没反应：
@keyframes drag-follow {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}
.draggable {
animation: drag-follow 1s linear;
animation-timeline: scroll(root); /* 错：这不是拖拽 */
/* 甚至有人写 animation-timeline: custom(dragTimeline); —— 但 dragTimeline 并未注册或更新 */
}
- 浏览器静默忽略未注册的
custom(...)名称，DevTools 中animation-timeline显示为none - 即使注册了
CustomTimeline，若未在每次touchmove中同步调用timeline.currentTime = x，动画也不会动 - 写了
animation-timeline却漏掉animation-range，动画默认绑定到整个滚动区间，与拖拽坐标无任何映射关系
真正需要拖拽过渡时，放弃 animation-timeline 这个思路。它不是“通用动画控制器”，而是专为滚动、视口等**可预测、可测量、浏览器原生感知的上下文进度**设计的。拖拽的实时性、双向性和事件耦合性，决定了它必须由 JS 主导、CSS 辅助过渡，而不是反过来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
