CSS Animation Timing Functions: easing, cubic-bezier & More

Source: Dev.to

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 CSS Animation Timing Functions: easing, cubic‑bezier & More 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;
}

Key Techniques

1. Target SVG elements with CSS class selectors
   Any SVG element (<svg>, <path>, <circle>, <rect>…) 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:

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

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.

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