直接用transform做变形动画完全可行，但必须配合transition或@keyframes才能动起来；单独写transform只是“定格变形”，不是动画。transition至少需指定transition-property: transform、transition-duration（如0.3s）和transition-timing-function（如ease-out），缺一不可；@keyframes定义后须通过animation属性显式绑定，且注意animation-fill-mode: forwards保持终态、名称严格匹配；JS中应使用requestAnimationFrame而非setTimeout更新transform，确保帧同步与单位正确，并合并多个变换为单条声明。
直接用 transform 做变形动画完全可行，但必须配合 transition 或 @keyframes 才能动起来；单独写 transform 只是“定格变形”，不是动画。
transition 触发 transform 动画时，哪些属性必须配齐
只写 transform: rotate(90deg) 不会动，关键是要让浏览器知道“从哪变到哪”“怎么变”“变多快”。transition 至少得指定三样：
-
transition-property: transform—— 必须明确写死，不能靠all，否则可能意外触发其他属性重排 -
transition-duration: 0.3s—— 默认是0s，不写就等于没过渡 -
transition-timing-function: ease-out—— 不写则用默认ease，但线性运动（linear）更符合“机械变形”直觉
常见错误：hover 时改了 transform，但忘了加 transition，或者只写了 transition: 0.3s（缺 property 和 timing-function），结果就是“啪”一下跳变。
@keyframes 里写 transform，为什么有时不动或只动一半
因为 @keyframes 本身只是定义动作序列，不绑定到元素上就等于白写。必须用 animation 属性显式挂载，且注意几个硬性条件：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 目标元素不能是
display: none或未渲染的伪元素（如::before没设content） -
animation-name必须和@keyframes名字**完全一致**（区分大小写） - 如果动画结束后想保持最终状态，得加
animation-fill-mode: forwards，否则会弹回初始值 - 移动端 Safari 对
transform: scaleZ()或rotateX()等 3D 函数支持不稳定，优先用rotateY()或rotateZ()
示例：@keyframes squash { from { transform: scaleY(1); } to { transform: scaleY(0.7); } }，绑定时得写 animation: squash 0.2s ease-in;，漏掉任何一项都可能静止不动。
用 JS 动态改 transform，requestAnimationFrame 为什么比 setTimeout 更稳
因为浏览器刷新率不固定，setTimeout(fn, 16) 在高刷屏（120Hz）或卡顿时会丢帧、跳变；而 requestAnimationFrame 会自动对齐下一帧时机，保证每帧只算一次、只设一次 style.transform。
- 别在
mousemove里直接赋值el.style.transform，高频触发会导致 layout thrashing - 正确做法：把计算逻辑放进
requestAnimationFrame回调，再用一个标志位防重复注册 - 注意单位：JS 中拼字符串时，
rotate(${angle}deg)的deg不能漏，translateX(${x}px)的px也不能省，否则无效 - 若涉及多个 transform 函数（如平移+旋转），务必合并成一条：
transform: translateX(20px) rotate(45deg)，不要分两次设style.transform，后者会覆盖前者
SVG 路径变形动画（d 属性补间）失败的典型原因
不是所有 <path> 都能平滑变形——核心限制是起始和结束 d 字符串的**命令结构必须严格对齐**。
- 比如起点是
M10,10 L50,10 L50,50 Z（三条直线闭合），终点也必须是相同数量、相同类型、相同顺序的命令，不能是M10,10 C20,5 40,5 50,10 L50,50 Z（含贝塞尔曲线） - 用 DevTools 直接对比两个
d值：按空格/逗号切开，逐项看首字母（M,L,C,Z）和参数个数是否一致 - 闭合指令
Z必须同步出现或都不出现，混用会导致插值错乱 - 过渡声明要写全：
transition: d 0.4s, fill 0.4s, stroke-width 0.4s，只写d会导致颜色或粗细突变
真正难的不是写法，而是路径归一化——设计师给的图标、Figma 导出的 SVG、手写的 d，三者结构往往不兼容，得先用工具（如 SVGOMG）转成统一格式再配对。
