Animating SVG with CSS
CSS animations work on SVG elements just like HTML — here's how to animate fills, paths, strokes, and transforms.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
CSS Transitions on SVG
Add smooth transitions to SVG property changes.
- path { transition: fill 0.3s ease; }
- path:hover { fill: #4F46E5; } — fill changes smoothly on hover
- Transition opacity: svg { transition: opacity 0.2s; }
- Transition stroke: stroke-width and stroke-dashoffset both support transitions
- Multiple transitions: transition: fill 0.3s, transform 0.2s ease-out;
SVG @keyframes Animation
Create looping and complex animations with @keyframes.
- Spin: @keyframes spin { to { transform: rotate(360deg); } } .icon { animation: spin 1s linear infinite; }
- Pulse: @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
- Fill change: @keyframes colorShift { from { fill: blue; } to { fill: purple; } }
- Scale: @keyframes pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
SVG Draw-On Effect with CSS
The signature SVG animation: paths that draw themselves onto the screen.
- Get path length in JS: const len = path.getTotalLength()
- Set initial: stroke-dasharray: len; stroke-dashoffset: len;
- Animate: .path { animation: draw 2s ease forwards; }
- @keyframes draw { to { stroke-dashoffset: 0; } }
- For scroll-trigger: use Intersection Observer to add an animation class when the SVG enters view
Frequently Asked Questions
Do CSS animations work on SVG elements?
Yes — most CSS animation properties work on SVG elements: opacity, transform, fill, stroke, stroke-dashoffset, visibility. A few properties like display and clip-path have partial support.
How do I stop an SVG animation on hover?
svg:hover path { animation-play-state: paused; } — this pauses the animation when the SVG is hovered.
Can I animate SVG viewBox with CSS?
No — CSS can't animate the viewBox attribute directly. Use JavaScript to change the viewBox value, or use a scrolling transform inside a clipping SVG for pan/zoom effects.
Why does my SVG CSS animation look choppy?
Animating properties like fill, stroke, and width triggers repaints. For smooth animation, use only transform and opacity — these use GPU compositing. For fill animations, accept the repaint cost or use a CSS filter trick.
How do I delay SVG animations for a sequence effect?
Use animation-delay on each path: path:nth-child(1) { animation-delay: 0s; } path:nth-child(2) { animation-delay: 0.2s; } path:nth-child(3) { animation-delay: 0.4s; }
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