Forem: Hari

Understanding CSS @keyframes: From Zero to Hero

Hari — Sat, 04 Apr 2026 08:12:02 +0000

This article is part of a series on CSS + SVG animations — the zero-JavaScript motion stack.

Introduction

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.

In this article we'll explore Understanding CSS @keyframes: From Zero to Hero and look at practical, copy-paste examples you can drop into any React, Vue, or plain HTML project.

Why SVG + CSS?

SVG shapes live in the DOM. CSS already knows how to animate DOM elements with @keyframes. The browser's compositor thread handles the rest at a smooth 60 fps — and you ship zero extra bytes to your users.

Core Concept

@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 viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle class="my-shape" cx="100" cy="100" r="80" fill="#6366f1" />
</svg>

Key Techniques

1. Target SVG elements with CSS class selectors

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

2. Prefer `transform` + `opacity`

These two properties trigger GPU compositing — no layout recalculation, no repaint. Always reach for them first.

3. Use `animation-delay` for staggering

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

Practical Example

Below is a complete, self-contained SVG + CSS animation you can paste anywhere:

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

<svg viewBox="0 0 200 200" width="200" height="200">
  <circle cx="100" cy="100" r="20" fill="#6366f1" />
  <circle class="dot" cx="100" cy="100" r="10" fill="#f472b6" />
</svg>

Using CSSVG

If you want a visual timeline editor to design motions like this without writing keyframe math by hand, check out CSSVG — it exports clean SVG + CSS that you paste directly into your project.

Summary

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 want me to cover a specific animation technique next!

Built with CSSVG — the visual CSS + SVG animation editor.

SVG Path Animations with CSS Keyframes: A Complete Guide

Hari — Sat, 04 Apr 2026 08:04:12 +0000

This article is part of a series on CSS + SVG animations — the zero-JavaScript motion stack.

Introduction

In this article we'll explore SVG Path Animations with CSS Keyframes: A Complete Guide and look at practical, copy-paste examples you can drop into any React, Vue, or plain HTML project.

Why SVG + CSS?

Core Concept

@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 viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle class="my-shape" cx="100" cy="100" r="80" fill="#6366f1" />
</svg>

Key Techniques

1. Target SVG elements with CSS class selectors

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

2. Prefer `transform` + `opacity`

These two properties trigger GPU compositing — no layout recalculation, no repaint. Always reach for them first.

3. Use `animation-delay` for staggering

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

Practical Example

Below is a complete, self-contained SVG + CSS animation you can paste anywhere:

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

<svg viewBox="0 0 200 200" width="200" height="200">
  <circle cx="100" cy="100" r="20" fill="#6366f1" />
  <circle class="dot" cx="100" cy="100" r="10" fill="#f472b6" />
</svg>

Using CSSVG

If you want a visual timeline editor to design motions like this without writing keyframe math by hand, check out CSSVG — it exports clean SVG + CSS that you paste directly into your project.

Summary

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 want me to cover a specific animation technique next!

Built with CSSVG — the visual CSS + SVG animation editor.

CSS + SVG Animations: Why They're the Perfect Pair

Hari — Sat, 04 Apr 2026 07:12:30 +0000

This article is part of a series on CSS + SVG animations — the zero-JavaScript motion stack.

Introduction

In this article we'll explore CSS + SVG Animations: Why They're the Perfect Pair and look at practical, copy-paste examples you can drop into any React, Vue, or plain HTML project.

Why SVG + CSS?

Core Concept

@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 viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle class="my-shape" cx="100" cy="100" r="80" fill="#6366f1" />
</svg>

Key Techniques

1. Target SVG elements with CSS class selectors

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

2. Prefer `transform` + `opacity`

These two properties trigger GPU compositing — no layout recalculation, no repaint. Always reach for them first.

3. Use `animation-delay` for staggering

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

Practical Example

Below is a complete, self-contained SVG + CSS animation you can paste anywhere:

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

<svg viewBox="0 0 200 200" width="200" height="200">
  <circle cx="100" cy="100" r="20" fill="#6366f1" />
  <circle class="dot" cx="100" cy="100" r="10" fill="#f472b6" />
</svg>

Using CSSVG

If you want a visual timeline editor to design motions like this without writing keyframe math by hand, check out CSSVG — it exports clean SVG + CSS that you paste directly into your project.

Summary

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 want me to cover a specific animation technique next!

Built with CSSVG — the visual CSS + SVG animation editor.

[Boost]

Hari — Sat, 04 Apr 2026 05:44:41 +0000

Hari

Mar 29

Why I Built an SVG Animation Tool That Ships Zero JavaScript

#webdev #css #tooling #animation

Comments

3 min read

Why I Built an SVG Animation Tool That Ships Zero JavaScript

Hari — Sun, 29 Mar 2026 02:14:14 +0000

I'm Hari, a software developer from India, and I want to tell you about a problem that kept annoying me until I finally did something about it.

The problem

Every few weeks, I'd be working on a landing page or a product site and need a simple SVG animation. A sliding icon. A fading shape. A logo that draws itself in.

And every time, the solution looked something like this:

npm install gsap
# or
npm install lottie-web

GSAP is 100KB+. Lottie is 239KB. That's a lot of JavaScript just to move a rectangle from point A to point B.

Here's the thing — browsers already know how to do this. CSS @keyframes can animate SVG elements beautifully. It's a native feature. Zero dependencies. Zero runtime. It just works.

But writing keyframe CSS by hand for SVG elements? That's painful. You're tweaking translate() values blindly, refreshing the browser, adjusting, refreshing again. It's slow, tedious, and error-prone.

I wanted something in between — the simplicity of CSS animations with a visual editor that doesn't ship any JavaScript to end users.

So I built CSSVG

CSSVG is a visual editor for SVG + CSS keyframe animations. The workflow is dead simple:

Paste your SVG or build shapes on the canvas
Drag elements on a timeline to set keyframes
Export clean SVG + CSS files

That's it. The output is readable, minimal code you can paste into any project — React, Vue, plain HTML, whatever.

No wrapper divs. No data attributes. No runtime classes. Just SVG and CSS.

Why not just use GSAP or Lottie?

They're great tools. Seriously. But they're overkill for most of what I was doing.

Tool	Runtime Size	Requires
GSAP	100KB+ JS	JS runtime on every page load
Lottie	239KB JS	After Effects + Bodymovin
CSS Animations	0KB	Writing keyframes by hand
CSSVG	0KB	Visual editor, exports clean code

If you're building complex, physics-based, interactive animations — use GSAP. It's built for that.

But if you need a hover effect, a loading animation, or a subtle entrance transition on SVG elements, you don't need to ship a JavaScript library to every user who visits your page.

What CSSVG does well

Visual canvas editor — move, resize, and arrange SVG elements directly. No hand-editing coordinates.
Timeline-based keyframes — drag elements across a 2-second timeline. CSSVG generates the CSS automatically.
Clean, readable output — no minification tricks, no opaque JSON blobs. You can read and modify the exported code.
Zero runtime — your users download nothing extra. The browser handles everything.

What it doesn't do (yet)

I want to be upfront about the limitations:

No custom easing curves (currently linear only)
Timeline is fixed at 2 seconds
No path morphing or complex path animations
No direct After Effects import

These are on the roadmap. But I wanted to ship something useful first rather than wait for perfection.

Try it

The editor is free to use: cssvg.com/editor

If you've ever spent 30 minutes tweaking translateX values by hand, give it a try. It takes about 60 seconds to go from a blank canvas to an exported animation.

I'd love to hear your feedback — what's missing, what's broken, what would make this actually useful for your workflow.

Find me on X: @cssvg_

Built solo, out of frustration, from India.

Forem: Hari

Understanding CSS @keyframes: From Zero to Hero

Introduction

Why SVG + CSS?

Core Concept

Key Techniques

1. Target SVG elements with CSS class selectors

2. Prefer transform + opacity

3. Use animation-delay for staggering

Practical Example

Using CSSVG

Summary

SVG Path Animations with CSS Keyframes: A Complete Guide

Introduction

Why SVG + CSS?

Core Concept

Key Techniques

1. Target SVG elements with CSS class selectors

2. Prefer transform + opacity

3. Use animation-delay for staggering

Practical Example

Using CSSVG

Summary

CSS + SVG Animations: Why They're the Perfect Pair

Introduction

Why SVG + CSS?

Core Concept

Key Techniques

1. Target SVG elements with CSS class selectors

2. Prefer transform + opacity

3. Use animation-delay for staggering

Practical Example

Using CSSVG

Summary

[Boost]

Why I Built an SVG Animation Tool That Ships Zero JavaScript

Why I Built an SVG Animation Tool That Ships Zero JavaScript

The problem

So I built CSSVG

Why not just use GSAP or Lottie?

What CSSVG does well

What it doesn't do (yet)

Try it

2. Prefer `transform` + `opacity`

3. Use `animation-delay` for staggering

2. Prefer `transform` + `opacity`

3. Use `animation-delay` for staggering

2. Prefer `transform` + `opacity`

3. Use `animation-delay` for staggering