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.