DEV Community

Cover image for Understanding CSS @keyframes: From Zero to Hero
Hari
Hari

Posted on

Understanding CSS @keyframes: From Zero to Hero

#css #keyframes #animation #beginners

Cover image for Understanding CSS @keyframes: From Zero to Hero

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;
}
Enter fullscreen mode Exit fullscreen mode 
<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>
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)