How to Animate SVG with CSS
From simple hover effects to complex draw-on animations — CSS is all you need to bring SVGs to life.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
CSS Transitions on SVG Elements
SVG elements respond to CSS transitions exactly like HTML elements. The most common use: hover color changes and opacity fades.
- svg path { fill: #333; transition: fill 0.3s ease; }
- svg path:hover { fill: #007bff; }
- transition: opacity 0.4s, transform 0.4s;
- Works on fill, stroke, opacity, transform — all GPU-accelerated properties
Keyframe Animations on SVG
Use @keyframes to create looping animations — spinning icons, pulsing elements, bouncing paths.
- @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
- svg .loader { animation: spin 1s linear infinite; transform-origin: center; }
- transform-origin: center is critical — SVG elements don't default to center
- Use SVG's own cx/cy for circle transforms instead of CSS transform-origin where possible
The Draw-On (Stroke) Effect
The most popular SVG animation — paths appear to draw themselves. Uses stroke-dasharray and stroke-dashoffset.
- Set stroke-dasharray to the path length: path.getTotalLength()
- Set stroke-dashoffset to the same value (path is invisible)
- @keyframes draw { to { stroke-dashoffset: 0; } }
- Animate stroke-dashoffset from path length to 0 — the stroke draws itself in
- Add fill: none and a visible stroke color before animating
Performance: What to Animate
Only animate properties that skip layout and paint — these run on the GPU compositor thread.
| Property | Performance | Recommendation |
|---|---|---|
| transform | Excellent | Always prefer over x/y/width/height |
| opacity | Excellent | Safe to animate |
| fill / stroke | Good | Fine for simple SVGs |
| width / height | Poor | Triggers layout — avoid |
| x / y | Poor | Use transform: translate() instead |
Frequently Asked Questions
Can I animate SVG clip paths with CSS?
Yes. Apply a CSS animation to the clipPath's child shapes. Animating transform on a <circle> inside a <clipPath> creates a moving mask effect.
How do I make an SVG animation pause on hover?
Set animation-play-state: paused on hover: svg:hover path { animation-play-state: paused; }
Why is my SVG animation jittery?
Animating layout-triggering properties (x, y, width, height) causes reflows. Switch to transform: translate() and transform: scale() for smooth animations.
Can I trigger SVG CSS animations on scroll?
Yes, using the Intersection Observer API. Add a class to the SVG when it enters the viewport; the CSS animation starts when the class is applied.
How do I get the path length for the draw-on effect?
Use JavaScript: const length = document.querySelector('path').getTotalLength(). Set stroke-dasharray and initial stroke-dashoffset to this value in CSS or JS.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG