不能用 border 自身做平移动画，必须用伪元素模拟边框并配合 transform: translatex() 实现；因 border 是绘制属性无独立坐标轴，transition 仅支持颜色/宽度变化，而 margin/left 会触发重排且移动整元素；纯 css 无法获取鼠标坐标，需 js 计算位置并注入 css 变量，再通过 calc() 动态定位；移动端需兼容 touch 事件并避免父容器 transform 导致的 getboundingclientrect() 偏移。
不能用 border 自身做平移动画，所谓“边框平移”必须拆解为独立可动元素 + transform: translateX()，否则只会闪、卡或完全没反应。
为什么 border 无法平移过渡
border 是绘制属性，不是位移属性。它的“位置”由元素盒模型决定，没有独立坐标轴。给 border-color 或 border-width 加 transition 只能变颜色或粗细，没法让“边框线本身横向滑动”。试图用 margin-left 或 left 推动边框，会触发重排，且视觉上是整个表单在动，不是边框在滑。
正确做法：用伪元素模拟可动边框
把“要平移的边框”抽成 ::after 伪元素，绝对定位贴在输入框底部（或其他边），再用 transform: translateX() 控制左右偏移：
- 给
input设position: relative，为伪元素提供定位上下文 -
::after设content: ""、position: absolute、bottom: 0、height: 2px、width: 100%、background: #007bff - 关键：在默认状态写
transition: transform 0.25s ease-out，不是写在:hover里 -
:hover::after中只改transform: translateX(20px)（或任意像素值）
如何让平移起点对齐鼠标进入位置
纯 CSS 无法读取鼠标坐标，必须配合 JS 才能实现“从鼠标入点开始滑出”的效果：
- 监听
input的mouseenter事件，用event.clientX - input.getBoundingClientRect().left算出相对 X 坐标 - 把这个值存进 CSS 变量，比如
input.style.setProperty('--mouse-x', x + 'px') - CSS 中写
::after { transform: translateX(calc(var(--mouse-x, 0) * 1px - 50%)); }（假设边框宽 100px，-50% 实现中心对齐） - 注意：
* 1px不可省略，否则calc()会因单位混用失效
容易被忽略的兼容性细节
移动端 touch 事件不触发 :hover，所以依赖 :hover::after 的纯 CSS 平移在 iOS Safari 上基本不可见；JS 方案也需同时监听 touchstart 并阻止默认行为（touch-action: none）。另外，如果表单父容器有 transform 或 opacity，getBoundingClientRect() 仍可靠，但 offsetLeft 会失真——这点常被忽略，导致箭头/边框偏移错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
