Animating SVG with CSS

Demo

In this post I want to go through of my mind process while creating animated SVG. I won’t talk about timing because I timed it as I felt was good, not necessarily how it should be done, I’m not an animator or someone who’s specialty is in  an interaction side of design or development. I’ll make exception here, animation doesn’t start when page loads but couple of seconds later because it’s easier to debug it that way.

First issue I encountered even before styling everything and animating it with CSS was problem with fonts. SVG’s attribute font-family didn’t work so I had to style the text throught CSS.

There is only one tspan so I can do this. If there were other tspans with their own styles I’d have use ids.

At first I’ve set opacity for all elements to zero.

And then I’ve begun making every element visible again. There still needs to be prefixed CSS because of WebKit, I didn’t know at the time but now it should work in all modern browsers.

There are two animation sequences, blinking and only turning opacity to 1.

One way animation is quite straight forward so I’ll put here how I did it for only id others are almost the same except the delay.

I have made only one way, but it can be made so it disappears again. The only problem with this the approach. Do I use blinking with custom timing, ie. cubic bezier, or do I involve JavaScript or multiple animations if it is even possible.

I also used there CSS transforms on SVG, sounds almost like a blasphemy to me now. There’s the same problem when working SVGMatrix and rotating things. This time I used a CSS transform skew, both X and Y, and I had to translate the doors back to correct position. It doesn’t work on all browsers the same *sigh*.

End of train of thoughts.