SVG Animation Timing Functions and Easing Curves: Practical Guide for Frontend Developers and Designers

Timing functions and easing curves are the invisible hands that shape how an animation breathes. In SVG, you can control motion and transformation with a variety of timing options—whether you’re animating a geometric shape, a stroke dash, or a whole SVG group. This post explains the core ideas, common curves, and practical snippets you can drop into your projects. For deeper dives and tooling, see SV Genius resources.

What is an easing curve and why does it matter?

An easing curve defines how the animation progresses over time. Instead of a constant speed, easing allows the motion to start slowly, speed up, or slow down at the end. This makes movements feel more natural and responsive, and it helps convey intent (e.g., a bounce to imply weight, a gentle glide for elegance).

In SVG, you typically control easing with two approaches:

• SMIL/attribute animation timing via dur, keyTimes, and keySplines (for cubic-bezier easing)
• CSS animation timing via animation-timing-function or inline SVG CSS, using keyword or cubic-bezier values

Both approaches are useful, and you can mix them to achieve precise timing across browsers and design systems. For an introduction to how these concepts map to SVG, check out SVG animation basics on SV Genius.

Common easing curves you’ll use

Easing curves are usually described by cubic-bezier functions or preset keywords. Here are a few that cover a wide range of motion:

• linear — constant speed (no acceleration)
• ease — slow start, faster middle, slow end
• ease-in — slow start, accelerating toward the end
• ease-out — fast start, decelerating toward the end
• ease-in-out — slow start and end, faster in the middle
• Cubic-bezier values, e.g. cubic-bezier(0.25, 0.1, 0.25, 1) for a smooth, natural feel

Tip: cubic-bezier values map to four control points on a unit square, controlling the speed over time. Adjusting these values can dramatically change perceived motion without changing the animation’s distance or duration. See examples in the snippets below and try variations to feel the difference. For guided examples, visit SV Genius curves guide.

Animating with SMIL in SVG: timing functions and keySplines

SMIL allows you to fine-tune timing of individual attributes. The <animate> element accepts dur, begin, and fill, and with calcMode="spline" you can apply a cubic-bezier curve via keySplines. This gives you precise easing per attribute animation.

Example: a circle moving horizontally with a cubic-bezier easing

<svg width="240" height="80" viewBox="0 0 240 80">
  <circle cx="10" cy="40" r="8" fill="teal"></circle>
  <animate attributeName="cx" from="10" to="210" dur="2s" repeatCount="1"
           calcMode="spline" keySplines="0.42 0 0.58 1" keyTimes="0;1"/>
</svg>

Notes:

• calcMode="spline" uses keySplines to define the easing curve.
• Try different keySplines values to experience how the motion changes. For example, 0 0 1 1 is linear in practice, while 0.25 0.1 0.25 1 yields a gentle ease-in-out.

Animating with CSS inside SVG

CSS can also drive SVG animations, especially for hover states or UI interactions. You can apply timing functions via CSS to transitions or animations on SVG elements. This approach is widely supported and aligns with responsive design systems.

Example: a stroked path that animates a dash offset with a cubic-bezier easing

svg { width: 100%; height: auto; }
.path { stroke: #5b9bd5; stroke-width: 4; fill: none;
        stroke-dasharray: 150; stroke-dashoffset: 150;
        animation: dash 2s cubic-bezier(.25,.1,.25,1) forwards; }
@keyframes dash { to { stroke-dashoffset: 0; } }

Practical tips for designers and front-end engineers

These tips help you ship better, more maintainable SVG animations with thoughtful timing:

• Prefer global timing: reuse a few curated cubic-bezier values (or CSS timing presets) across components to maintain consistency.
• Test with motion preferences: respect reduce-motion media queries and provide simpler animations when users request reduced motion.
• Reserve complex easing for emphasis: use subtle curves for micro-interactions, and bolder curves for attention-grabbing transitions.
• Combine SMIL and CSS wisely: use SMIL for precise keyframe control on SVG attributes, and CSS for layout-driven or responsive animation overrides.
• Document easing decisions: keep a shared legend of keySplines and CSS timing functions in your project docs to help future maintainers.

Accessibility considerations and performance

Animated SVGs can be delightful, but not at the expense of accessibility or performance. Keep durations reasonable (typically 0.5s to 2s for UI motions), provide motion-reduced alternatives, and avoid simultaneous long animations that overwhelm users. Prefer hardware-accelerated properties like transforms and opacity, and test on low-end devices to ensure smooth playback. For more accessibility guidance, see related articles on SVG accessibility and performance.

Putting it all together: a small, cohesive example