HTML怎么做变形动画_html CSS transform变形动画（汇总）

作者：袖梨 2026-06-26

直接用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 属性显式挂载，且注意几个硬性条件：

立即学习“前端免费学习笔记（深入）”；

目标元素不能是 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 会导致颜色或粗细突变