transition 对 transform 无效是因为其初始值 none 无法插值，需显式声明起始状态如 scale(1) rotate(0deg)；应只过渡 transform 而非 all，避免性能损耗与意外动画。
transition 为什么对 transform 无效？
常见现象是写了 transition: all 0.3s，但元素缩放或旋转时没动画——根本原因是 transform 的初始值默认是 none，而 none 无法被浏览器插值计算。必须显式声明起始状态。
- 正确写法：给元素加初始
transform: scale(1) rotate(0deg) translateX(0)，再在 hover 或 class 切换时改值 - 别依赖
all，它会尝试过渡所有可动画属性（比如height），拖慢性能；只写明需要的：transition: transform 0.3s ease - CSS 自定义属性（
--scale）不能直接用于transform过渡，浏览器不支持插值计算 CSS 变量里的变换值
scale/rotate/translate 混合过渡怎么写才顺？
多个 transform 函数叠加时，顺序决定最终效果（先 scale 再 rotate 和先 rotate 再 scale 结果不同），但过渡本身只关心数值变化，不关心顺序逻辑。
- 始终用单个
transform声明，把多个操作写在一起：transform: scale(1.2) rotate(15deg) translateY(-10px) - 避免拆成多个
transform声明（CSS 会覆盖前一个），也别试图用 JS 分别设style.transform多次 - 如果要用 JS 动态控制某一项（比如只改缩放），推荐用
transform: scale(var(--s, 1)) rotate(var(--r, 0deg))+style.setProperty('--s', '1.3')，但注意这仍需配合transition: transform才生效
transitionend 事件监听不到 transform 变化？
不是监听不到，而是触发条件比想象中严格：只有 transform 的计算值真正改变（且有过渡过程），才会触发 transitionend。常见失效场景是过渡时间设为 0s，或起止值完全相同。
- 确保监听的是
transform属性名：el.addEventListener('transitionend', e => { if (e.propertyName === 'transform') { ... } }) - 移动端 Safari 对
transform的transitionend支持不稳定，建议加兜底：用setTimeout延迟执行后续逻辑（时间与transition-duration一致） - 如果用
will-change: transform提升渲染层，可能影响事件触发时机，测试时记得关掉它看是否回归正常
缩放后文字模糊、图标锯齿怎么办？
这是硬件加速和亚像素渲染冲突导致的，尤其在非整数缩放（如 scale(1.3)）或低 DPI 屏幕上更明显。
立即学习“前端免费学习笔记（深入）”；
- 加
transform: translateZ(0)或will-change: transform强制 GPU 渲染，多数情况能缓解 - 避免用
scale()缩放含细线、小字号的文本；优先考虑font-size+line-height调整，或用 SVG 替代位图图标 - Chrome 115+ 支持
image-rendering: pixelated，但仅对background-image有效，对transform缩放的元素无效
真正麻烦的是混合了 transform 和 filter（比如 blur()）的场景——它们会触发不同渲染管线，缩放模糊可能突然加重，这种组合最好提前在目标设备上实测。
