CSS Transform 动画在 SVG 上：Scale、Rotate、Translate

Source: Dev.to

为什么使用 CSS + SVG 动画

现代浏览器内置了一个强大且常被低估的动画系统：SVG + CSS 关键帧。无需运行时，也不需要打包工具的魔法——只需标记和样式，浏览器会自动进行硬件加速。SVG 形状存在于 DOM 中，CSS 可以像对待其他元素一样对它们进行动画。合成线程以平滑的 60 fps 处理工作，你甚至不需要向用户发送额外的字节。

基础变换动画示例

@keyframes example {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.my-shape {
  animation: example 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

任何 SVG 元素（<svg>、<path>、<circle>、<rect>…）都可以添加类并像普通 HTML 元素一样进行动画。

变换 + 不透明度

transform 和 opacity 都会触发 GPU 合成——没有布局重新计算，也没有重绘。它们应该是实现流畅动画的首选。

使用 animation-delay 实现错位

.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }

通过递增的延迟创建级联效果，无需额外的 JavaScript。

完整的自包含 SVG + CSS 动画

  @keyframes orbit {
    from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
  }
  .dot { animation: orbit 2s linear infinite; transform-origin: center; }

将此代码片段粘贴到任意 HTML、React、Vue 或 Svelte 文件中，即可直接使用。

可视化时间轴编辑器

如果你更喜欢通过可视化时间轴编辑器来设计运动，而不是手动编写关键帧数学，可以尝试 CSSVG。它会导出干净的 SVG + CSS，你可以直接放入项目中。

要点总结

• SVG 形状是 DOM 元素 → CSS 可以原生动画。
• @keyframes + transform/opacity = GPU 合成，零 JS 动画。
• 输出的是可移植的标记 —— 在 React、Vue、Svelte 或普通 HTML 中都能使用。

在评论区留下问题，如果你希望我下次讲解特定的动画技巧！