Animating SVG Images Using Nothing More Than CSS

Today I am going to demonstrate a few SVG animation examples using nothing more than HTML and CSS. Manipulating SVGs is really simple and is a hassle free way of adding interactivity to a website.

But, before we get started with the fun bits, lets talk a little bit about SVGs. Their popularity is growing throughout the world of web due to their ability to scale without losing clarity and the ease in which they can be manipulated using CSS. What’s more, browser support of SVGs is extremely good and no longer can be used as an excuse to not use them.

All examples covered in this post work with SVG code inserted directly into the HTML. This allows class names and ID’s to be added to the individual SVG paths, providing a way of manipulating the image for animations or hover effects.

With all of the examples you can view the code used to create the animations by clicking the HTML and LESS buttons on the Codepen box.

Animation 1 – Bar Charts

This is a simple animation, that uses CSS transforms to adjust the scale of each path along the Y axis. The addition of CSS transitions makes the transform smooth and happen over a set period, rather than instantly.

See the Pen SVG Animation – Hover by Andy Taylor (@tylrandy89) on CodePen.

Animation 2 – Clock Hands

We are getting slightly more complicated now and introducing CSS animations into the fold. Each hand (SVG Path) has the same linear keyframe animation applied to it, which rotates the hands around an origin on an infinite loop. The difference between the two paths is the duration time applied to the animation.

This example is purely for display purposes and the animation timings of the minute and hour hands are not accurate.

See the Pen Clock SVG Animation by Andy Taylor (@tylrandy89) on CodePen.

Animation 3 – Rocket

This animation uses similar techniques to the clock animation, however, we have combined various keyframe animations to provide a more realistic animation.
The cloud paths have been grouped together and animated using a single keyframe rule. This rule simply moves the clouds from position a above the viewing window, to position b below. The rocket flames use two different keyframe rules to change the colours, this has been set to loop infinitely. Finally the rocket keyframe scales down the rocket and moves it up the page to mimic the effect of taking off. Adding the ease-in animation property slowly speeds up the take off.

See the Pen SVG Rocket Animation by Andy Taylor (@tylrandy89) on CodePen.

Written by Andy Taylor, Web Developer at ExtraMile Communications.

At ExtraMile we try to take an hour out each week to look around us at what others do and to gain inspiration and to admire people’s creativity. Each post in this series is one staff member’s take on the world of web, design and things online. We hope you enjoy it.