transform本身不会动，必须配合transition或@keyframes才能动；transition需配齐transition-property、duration和timing-function三项，缺一不可，否则动画失效。
transform 本身不会动，只写 transform: scale(1.5) 或 rotate(90deg) 是静态变形；要让它“动起来”，必须配合 transition 或 @keyframes，且关键参数一个都不能少。
transition 触发 transform 动画时，哪些属性必须配齐
只加 transform 不会过渡，浏览器不知道“从哪来、到哪去、怎么走”。transition 至少得明确三项：
-
transition-property: transform—— 必须单独写死，不能靠all，否则可能意外触发重排（比如连width一起过渡） -
transition-duration: 0.3s—— 默认是0s，不写就等于没过渡 -
transition-timing-function: linear或ease-out—— 不写则用默认ease，但线性更符合“机械形变”直觉
常见错误：.box:hover { transform: rotate(180deg); } 却漏了 transition 声明，结果就是“啪”一下跳变；或者只写了 transition: 0.3s，缺 property 和 timing-function，同样无效。
@keyframes 定义 transform，为什么动画不动或只动一半
@keyframes 只是动作蓝图，不挂载到元素上等于白写。绑定时必须满足硬性条件：
- 目标元素不能是
display: none，也不能是未渲染的伪元素（比如::before没设content） -
animation-name必须和@keyframes名字**完全一致**（区分大小写） - 想让动画停在终态？必须加
animation-fill-mode: forwards，否则一结束就弹回初始值 - 移动端 Safari 对
rotateX()、scaleZ()等 3D 函数支持不稳定，优先用rotateY()或rotateZ()
示例：@keyframes squash { from { transform: scaleY(1); } to { transform: scaleY(0.7); } }，绑定时得写 animation: squash 0.2s ease-in;，漏掉任何一项都可能静止不动。
SVG 路径 d 属性做形状变形，为什么补间失败
SVG 形状变形依赖路径指令结构对齐，不是“看起来像就行”。起始和结束 <path d="..."></path> 的命令数量、类型、顺序必须完全一致，否则浏览器无法插值，动画直接跳变或卡住。
- 检查方式：把两个
d字符串按空格/逗号切分，逐项比对命令字母（M,L,C,Z）和参数个数 - 推荐用 SVGOMG 或 ShapeShifter 工具归一化路径：统一用直线
L或三次贝塞尔C，关闭自动简化 - 若原始图标来自不同设计源，建议重绘为同一套规范（例如全用
C+ 固定控制点数量） - CSS 方式最轻量：
path { transition: d 0.4s ease-in-out; }，再通过 class 切换改d值；注意d过渡在 Chrome 49+、Firefox 53+、Safari 12.1+ 已稳定支持
如果变形还涉及描边粗细、虚线偏移或填充开关，记得额外声明 transition 对应属性，否则这些变化会突变。
corner-shape 动画为什么滚动时卡顿或不生效
corner-shape 是可动画的，但它依赖滚动驱动而非时间驱动，容易因监听粒度或计算开销出问题。
- 别用
scroll事件直接改corner-shape，会导致频繁重绘；应结合IntersectionObserver或requestAnimationFrame节流 -
corner-shape: superellipse(2)（即squircle）比superellipse(-1)（scoop）计算更轻，复杂函数值在低端设备上易掉帧 - 滚动中同时驱动多个
corner-shape+transform+opacity，需确认是否触发了层合成（will-change: transform可提前提示，但别滥用） - 目前仅 Chromium 和 Safari 支持
corner-shape，Firefox 尚未实现，必须加降级（如border-radius）
真正难的不是写出来，而是让每个 d 指令对齐、每条 transition 都有明确 property、每次 corner-shape 变化都落在渲染帧上——这些细节不校验，动画就只是“看起来差不多”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
