CSS Transform Animations on SVG: Scale, Rotate, Translate

Source: Dev.to

Why use CSS + SVG animations

Modern browsers have a powerful, underappreciated animation system built right in: SVG + CSS keyframes. No runtime, no bundler magic — just markup and styles that the browser hardware‑accelerates automatically. SVG shapes live in the DOM, so CSS can animate them exactly like any other element. The compositor thread handles the work at a smooth 60 fps, and you ship zero extra bytes to your users.

Basic transform animation example

@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;
}

Any SVG element (<svg>, <path>, <circle>, <rect>…) can receive a class and be animated just like a regular HTML element.

Transform + opacity

Both transform and opacity trigger GPU compositing — no layout recalculation, no repaint. They should be your first choice for smooth animations.

Staggering with 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; }

Use incremental delays to create cascading effects without extra JavaScript.

Complete self‑contained SVG + CSS animation

  @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; }

Paste this snippet into any HTML, React, Vue, or Svelte file and it works out of the box.

Visual timeline editor

If you prefer a visual timeline editor to design motions without writing keyframe math by hand, try CSSVG. It exports clean SVG + CSS that you can drop directly into your project.

Takeaways

• SVG shapes are DOM elements → CSS can animate them natively.
• @keyframes + transform/opacity = GPU‑composited, zero‑JS animation.
• The output is portable markup — works in React, Vue, Svelte, or plain HTML.

Drop a question in the comments if you’d like me to cover a specific animation technique next!