Turns out, animating inline SVG Line Art with CSS is super easy. Chris Coyier has a great explanation of how it works over on CSS Tricks. It's such a simple way to add a bit of visual flare to a page, so I think it could come in pretty handy.

Basically, all you need to do is apply stroke-dasharray to an SVG element which gives it a dashed stroke and then use stroke-dashoffset to offset the stroke dashes. Offsetting the dashes essentially moves them, and if you use a large enough stroke-dashoffset you can completely remove the dashes from view. Then it’s just a matter of animating the stroke-dashoffset back to 0.

I had some fun playing around with the technique this morning and made an animation of a very ambiguous smartphone illustration. In my example, I used a keyframe animation, but you could just as easily use a CSS transition if you wanted to apply the animation to a button hover or something like that.

SVG support is pretty good, but keyframe animations aren’t supported by older versions of IE (9 and down). If you’re going to use this technique, I would only recommend using it to add a bit of non-essential life to a page and make sure you have an un-animated fallback or something for older browsers.

0 Cool post, man.