CSS动画缩放偏差的根源是单位参照系不统一：px被二次缩放，%和rem依赖动态基准，导致错层；唯一稳定方案是全程使用vw/vh视口单位配合calc()，禁用混用单位与布局属性。
缩放时 CSS 动画位移偏差，不是动画写错了，而是你用了 px 做位移基准，而浏览器在缩放时对 px 和相对单位的处理逻辑根本不同——px 被二次缩放，% 和 rem 却按不同参照系重新计算，结果错层。
px 在缩放下会“被放大两次”
比如 transform: translateX(100px)：浏览器先按原始 CSS 解析出 100 像素值，再叠加当前 zoom 比例（如 125% → 实际移动 125px）。但如果你同时用 left: 50% 定位父容器，它的 50% 是按缩放后视口宽度算的。两者参照系不一致，动画路径就漂了。
-
px是设备像素单位，在缩放中会被浏览器“视觉拉伸”，但不参与布局重算 -
%是相对于父容器当前渲染尺寸的百分比，父容器本身又受缩放影响，导致嵌套时误差放大 -
rem依赖html的font-size，而该值在系统级高 DPI 缩放或用户自定义字号下可能突变（比如从 16px 变成 24px）
用 rem 或 % 替代 px 不等于问题消失
直接把 translateX(100px) 改成 translateX(6.25rem)（假设 1rem = 16px）看似合理，但一旦用户设置了「强制大字体」或 Electron 手动调 webFrame.setZoomFactor(1.5)，rem 就失控了。同理，top: 20% 在 zoom=80% 下，父容器高度被压缩，20% 对应的像素值变小，但动画元素的 transform 还按原始比例走，视觉上就“掉下去”了。
- 单纯替换单位不解决错层，必须统一参照系：要么全用视口单位（
vw/vh），要么全交由 JS 动态归一化 -
clamp(0.8rem, 1rem, 1.4rem)可以压住rem的极端波动，但仅适用于静态偏移，不适用于连续动画帧 - 动画关键帧里混用
rem和px（如transform: translateX(2rem) translateY(10px)）会触发插值失准，比单用px更抖
真正稳的动画位移只有一种写法
绕过所有单位歧义，用 transform: translate() 配合视口单位 + calc()，并禁用任何可能触发布局的属性：
- 位移全部用
vw/vh：例如transform: translateX(10vw) translateY(-5vh)，它们始终相对于当前视口，缩放时比例恒定 - 需要响应文字流？改用
transform: translateX(calc(50% - 50vw))—— 这里50%是父容器宽，50vw是视口一半，差值就是居中偏移，且两者同步缩放 - 绝对禁止在同一个
transform值里混用单位：translateX(2rem) translateY(10px)❌；translateX(2rem) translateY(0.625rem)✅（前提是 rem 基准可控） - 动画开始前加
will-change: transform，但动画一结束立刻用 JS 移除，否则 Chrome 会警告且合成层泄漏
最常被忽略的一点：哪怕动画只在一个关键帧里偷偷写了 margin-left: 1px，整条动画链都会退回重排路径，缩放时位移直接失准。稳定不是靠单位替换，而是从第一行代码起就拒绝任何布局属性介入动画流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
