下划线动画需将 transform-origin 设为 center 于伪元素上，配合 width: 0 和 scalex(0)→scalex(1) 实现中点展开；父元素为 inline 时须用 absolute 定位+translatex(-50%) 居中，避免原点偏移。
下划线动画用 scaleX 但始终只从左端展开？
因为默认的 transform-origin 是 left center（或 0% 50%），scaleX(0) → scaleX(1) 实际是“从左往右拉伸”，不是“从中点向两边铺开”。要实现中间出发的展开，必须显式把原点设到水平中心。
- 对伪元素
::after或::before，加transform-origin: center;或transform-origin: 50% 50%; - 确保该元素宽度初始为
0（比如width: 0;），且display: block;或inline-block; - 若父元素是
inline（如<a></a>），伪元素需设position: absolute;并配合left: 50%; transform: translateX(-50%);居中定位，否则center原点会按父容器盒模型计算，可能偏移
transform-origin: center 在 <a></a> 上无效？
直接写在 <a></a> 标签上没用——下划线通常是用伪元素模拟的，transform-origin 必须作用于那个伪元素本身。而且，如果伪元素用 width: 100% 初始化，再缩放，它会先占满再缩小，视觉上仍是“从左缩到中间”，而不是“从中间长出来”。
- 正确做法：伪元素初始
width: 0;，transform: scaleX(0);，再通过transition过渡到scaleX(1) - 必须同时设
transform-origin: center;在伪元素上，不能只靠left: 50%补偿 - 注意浏览器兼容性：
transform-origin在旧版 Safari 中对inline元素伪元素支持不稳定，建议外层包一层display: inline-block;的容器
动画卡顿或闪烁？检查这些渲染属性
纯 scaleX 动画本应是 GPU 加速的，但一旦触发重排（reflow）就会掉帧。常见诱因：
- 伪元素未设
will-change: transform;（尤其在复杂页面中，提前提示浏览器优化） - 父元素有
overflow: hidden;且伪元素超出边界，导致裁剪干扰合成层 - 使用了
top / left配合transform，造成 position 和 transform 双重定位冲突 - 动画时长过短（如
0.1s）或过长（0.8s以上），人眼易感知起止突兀；推荐0.3s～0.4s+cubic-bezier(0.34, 1.56, 0.64, 1)模拟弹性收尾
响应式下 transform-origin: center 错位？
当容器宽度动态变化（比如窗口缩放），而伪元素宽度固定（如 width: 100px），center 就不再对应文字中点。此时不能依赖绝对宽高，得让伪元素宽度跟随内容。
- 给伪元素设
width: 100%;，但前提是父元素（如<a></a>）已设display: inline-block;或display: table;，否则100%无效 - 更稳妥：用
transform: scaleX(0) translateX(-50%);初始态，过渡到scaleX(1) translateX(-50%);，靠translateX(-50%)始终锚定中点，不依赖 width 百分比计算 - 避免在媒体查询里重复写
transform-origin，它本身是响应式的，只要伪元素盒模型实时居中，原点就自然有效
transform-origin 必须和它的盒模型中心一致，而这个“中心”由它的 width、height、position 共同决定——不是文字的中心，也不是父元素的中心，是它自己的。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
