animation-play-state仅支持running/paused，无法响应鼠标坐标；需用js实时计算clientx/clienty并驱动css变量或transform实现跟随效果。
animation-play-state 不能响应鼠标位置，只能暂停/运行
很多人误以为 animation-play-state 能根据鼠标坐标动态调整动画进度，其实它只接受 running 或 paused 两个值，无法读取 clientX、pageX 等坐标信息。想让动画“跟着鼠标走”，必须换思路：用 JS 实时计算位置，再驱动 CSS 变量或 transform。
用 transform + mousemove 实现跟随位移
这是最常用也最轻量的方案，适合平移、缩放、旋转等视觉反馈：
- 监听
mousemove事件，获取e.clientX和e.clientY - 将坐标映射为偏移量（比如减去元素中心点，再除以某个系数控制灵敏度）
- 用
el.style.transform = `translate(${x}px, ${y}px)`直接更新 - 避免在事件里写复杂计算，可节流（
requestAnimationFrame或setTimeout）防卡顿
示例关键片段：
const el = document.querySelector('.follow');
document.addEventListener('mousemove', e => {
const x = (e.clientX - window.innerWidth / 2) / 20;
const y = (e.clientY - window.innerHeight / 2) / 20;
el.style.transform = `translate(${x}px, ${y}px)`;
});
用 CSS 自定义属性（--x、--y）联动动画
如果想保留 CSS 动画的声明式优势，又需要响应鼠标，推荐把 JS 计算结果写入 CSS 变量，再在 @keyframes 或 transform 中引用：
- 先在根或元素上定义变量：
:root { --mouse-x: 0; --mouse-y: 0; } - JS 更新变量：
document.documentElement.style.setProperty('--mouse-x', x) - CSS 中使用：
transform: translate(calc(var(--mouse-x) * 1px), calc(var(--mouse-y) * 1px)); - 注意：CSS 变量不能直接用于
@keyframes的数值插值（浏览器不支持），但可用于transform、filter等支持 calc 的属性
为什么不用 animation + mousemove 控制播放进度？
理论上可以靠 JS 改 animation-duration 或重设 animation-delay 来“拖动”动画帧，但实际非常脆弱：
- 浏览器不提供标准 API 获取当前动画帧时间戳（
getAnimations()返回的是 Animation 对象，但currentTime在大多数情况下只读） - 强制重置
animation会触发重播，丢失当前状态 - 移动端 touchmove 频率远低于 mousemove，容易断连
- 性能开销大，每帧都操作 animation 属性比直接改 transform 慢得多
真正需要“拖拽式动画进度”的场景（比如时间轴预览），应优先考虑 Canvas 或 WebGL，而非 CSS 动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
