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.

Multilingual Madness: An insight into one of our biggest projects to date.

If you’ve been keeping up with the latest tweets from extramilecomms, you’ll have seen that the website development for our EU funded multilingual project is well underway.

What’s it all about?

SPiCE³ (Sectoral Platform in Chemicals for Energy Efficiency Excellence) is a project designed to enable the European chemical industry to improve their energy efficiency, particularly aimed at SMEs as they make up a substantial part of the industry.  It aims to bring together a range of expertise, tools and knowledge from partners representing 11 countries and expert organisations within Europe.

What part does ExtraMile play in the project?

It’s our job to create an online platform which will act as an information hub, allowing for expertise to be shared and the aim of improving energy efficiency to be met. No pressure then!

Just some of the key requirements of the website:

What were our design considerations?

Once the navigation structure had been finalised and with the above ideas in mind (and many more), our designer Matt got to work on the design. He created a corporate yet modern concept with bright splashes of colour, which would work well with the large navigation structure and create the user friendly feel that we were aiming for. At this point, the layout of the website elements was also carefully considered.

Building a multilingual website meant that we had to be aware of language differences and how they could affect the visuals and overall user experience. Our ongoing work on multilingual email marketing campaigns may have helped a little with this!

For example, a menu item “On site training” when translated into German is “Unternehmensinterne Schulungen”… almost twice as long! We decided to go responsive too so this added another layer of complexity meaning that the design needed to be capable of adapting elegantly to a range of screen widths in any language.

We opted for a left hand vertical menu (to the right) to ensure that our navigation was easy to access on any device and looked near identical, regardless of the language it is being viewed in.

Another important aspect of the design for us was to place a large focus on the the key areas which users of the SPiCE³ website would benefit from. We placed Key Resources front and centre on the home page. Above this, quick access tiles to the assessment tool and user registration area. The top section of the home page was filled with a colourful geometric banner, scrolling through to guide users to useful areas of the website.

What were our design considerations?

I’ve been tasked with building the SPiCE³ website and bringing the design concepts to life. I began by researching the various technical solutions that we could use to achieve our range of requirements. The first decision was an easy one. I opted to build the site using the Joomla! Content Management System. It’s native multilingual support has been around for a while and is definitely impressive, extending to 3rd party components too.

Joomla! supports many languages, using translation packs (all Open Source and contributed by the Community) which contain the core translations for CMS elements like login buttons, system messages etc. Each translation pack places a folder in the back-end with its own language files for a developer to work with. This principle is followed for 3rd party components and plugins too, so each of these can have associated language files for any installed language, which you’re also able to create yourself if they don’t already exist.

The language/country codes you see to the right form part of any URL for the website. So if you’re on the About page and viewing it in English/UK, then switch the language to French/France, you’ll see the French version of the About page. Only the language code will have changed while the rest of the URL stays the same. This is great for SEO and helps maintain a more organised site.

The Apple Online Store provides a good example of this:

Here’s the iPod Touch page for UK – http://store.apple.com/uk/buy-ipod/ipod-touch
Here’s the iPod Touch page for France – http://store.apple.com/fr/buy-ipod/ipod-touch

After researching and comparing a number of 3rd party translation systems for Joomla!, I chose one which met our requirements nicely and used this within our site. It acts an interface for users to input their own translations for each language, managing the structural elements of the website (menus, tiles, headers, footers) as well as the main article content. So essentially, it allows us to duplicate our main elements and make the necessary modifications for each language we wish to translate in to.

The site has been built fully in its base language of English and I’m now working hard at implementing the multilingual functionality and translations, which we sourced at an earlier stage of the development. Attention to detail at this point is critical as you’re dealing with 12 times the amount of menus, modules, language files and variables you would normally have when building a single language site. Any non standard functionality must also be considered. Our site has a calendar, a forum, an article tagging system, social feeds and contact forms to name a few, so we’re making sure that each of these elements are available in their fully translated form for any of the participating languages.

Take a look at the shot of the forum below to see how it is viewed in German:

Watch this space for the final product, it’ll be worth the wait!