CSS SVG Animation

Since the arrival of CSS3, adding animations to your code doesn’t have to involve programming — a few keyframes can create a lot of magic and enhance the user experience. With the first week of my web dev bootcamp coming to a close, I paid a visit to this month’s Creative Coding Club, and took advantage of the SVGs provided to dip my feet into CSS animation.

SVG by Natalie Cooper

Scalable Vector Graphics (SVG) is an image format made up of paths that are easy to interact with and animate. SVGs can grow without losing their quality, and compress to small sizes (yay for fast load times!).

I decided to animate my new gnome friend by making his nose grow and change hue, which meant first isolating the nose. The code generated by SVGs can be quite long and unreadable. Developer tools comes in super handy to locate the path that corresponds to a specific shape of the SVG (in this case, the ellipse of the nose). Set an #id for the path in your HTML to make it easy to find and select.

CSS animations are controlled by various animation sub-properties and keyframes (helpful summaries here and here). My initial properties were:

I then added a transform property (scale) to enlarge the nose, and changed it’s fill colour.

Surprisingly, this resulted in the nose falling off as it grew.

The reason for this unfortunate loss of body part is that the default starting point of the shape (and this is true not only in animation, but also when positioning items absolutely) is the top left corner. To correct this, the transform-origin property can be used:

In the final animation, the nose grows slightly and changes colour twice, for 3 seconds each time. I also added some percentage keyframes to change the colour of the hat, on a loop.

Show your support

Clapping shows how much you appreciated Estela Thomson’s story.