CSStransform动画制作全攻略

HTML中利用CSS transform实现流畅变形动画并非简单设置属性即可，必须通过transition或@keyframes精确控制变化过程：transition需同时指定transform、持续时间和缓动函数，缺一不可；@keyframes定义后须用animation显式绑定，并注意名称匹配、fill-mode保持终态及移动端兼容性；JavaScript动态控制时应优先采用requestAnimationFrame确保帧同步，合并多变换为单条声明并严格补全单位；而SVG路径变形更需路径命令结构完全对齐，否则d属性补间必然失败——掌握这些关键细节，才能让旋转、缩放、挤压等机械感十足的变形动画真正“活”起来。

直接用 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 属性补间）失败的典型原因

不是所有 都能平滑变形——核心限制是起始和结束 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）转成统一格式再配对。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。