最常见原因是初始 transform 值为 none，浏览器无法对 none → rotate(30deg) 插值计算，必须显式声明起始状态如 transform: scale(1) rotate(0deg) translatex(0)。
transition: transform 为什么写对了却没动画
最常见原因是初始 transform 值为 none，而浏览器无法对 none → rotate(30deg) 这类变化做插值计算——它不是“不生效”，是根本没法过渡。必须显式声明起始状态。
- 给元素加默认
transform: scale(1) rotate(0deg) translateX(0)，哪怕数值是“无感”的 - 别依赖
transition: all 0.3s，它会忽略none的不可插值性，还可能拖慢性能 - 检查是否误写了
tranform（少个s）——拼写错误会让整条transition失效
JS 动态改 transform 后 transition 突然失效
直接赋值 element.style.transform = 'scale(1.2)' 会覆盖 CSS 中定义的 transition 规则，尤其当该元素正在运行 hover 动画时，内联样式优先级更高，导致过渡链断裂。
- 优先用 class 切换控制状态：
el.classList.add('is-zoomed')，把所有变换写在 CSS 里 - 若必须 JS 控制，先读取当前 computed 值：
getComputedStyle(el).transform，再用DOMMatrix解析+叠加，而不是字符串拼接 - 避免在
transition过程中读取offsetHeight、getBoundingClientRect()等触发 layout 的 API，它们会强制刷新并打断动画帧
缩放+位移同时动，但看起来像“先跳再缩”
这不是 bug，是浏览器对复合 transform 的解析顺序和渲染时机差异造成的视觉错觉。比如你写了 transform: scale(0.8);，然后 JS 加 class 触发 transform: translateX(100px)，两个声明不在同一规则里，后者会完全覆盖前者。
- 所有变换必须写在同一个
transform声明中：transform: translateX(100px) scale(0.8) - 顺序影响结果：推荐统一用「位移→旋转→缩放」，避免缩放改变旋转中心导致偏移放大
- 如果用 JS 设置，务必一次性写完整字符串：
el.style.transform = 'translateX(100px) scale(0.8)'，不要分两次赋值
动画卡顿或文字模糊，但 transition 和 transform 都写对了
硬件加速没真正启用，或者被其他 CSS 属性意外阻断。即使写了 transform，只要父容器有 overflow: hidden 或 filter: blur(1px)，GPU 合成层就建不起来。
- 加
will-change: transform或transform: translateZ(0)强制提升图层，但仅在动画触发前一刻添加，结束后立刻移除 - 禁用会阻断合成的属性：动画元素上别用动态
box-shadow、filter，也别让父级设overflow: hidden - 移动端 Safari 对
cubic-bezier()高阶参数支持不稳定，简单交互优先用ease-in-out，别硬套复杂贝塞尔
transform 的起始值和结束值类型必须严格匹配——从 translateX(50px) 到 scale(1.5) 不会过渡，因为函数类型不同；从 matrix() 到 rotate() 同样不行。始终用同构的函数组合，才是稳定的基础。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
