Simple animations using CSS

| Posted by absolute

We recently designed and built a new website for Potter Clarkson, a firm of intellectual property lawyers based in Nottingham. During the redesign process we created a set of 11 icons to represent each of Potter Clarkson’s science and technology service areas. To give them added interest for visitors to the website we created individual animations for each of the icons.

The animations activate whenever you hover your mouse over an icon, and the animation reverses when you move your mouse away. Below we’ll explain how we animated two of these icons using simple transformations and transitions that can create a variety of effects.

It’s worth noting that these animations were created with the latest browsers in mind, so older versions of browsers may not display them in the same way. Since these effects are added ‘extras’ to the experience and not essential to the user’s journey through the website it wasn’t necessary to spend time on backwards compatibility.

Firstly, here’s how to create an animated atom icon in CSS with each satellite spinning around the centre:

.electronics span {
transition:all 2s ease 0s;
.electronics a:hover span {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
.electronics a:hover .sat2 {
-ms-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);

This animation is extremely simple. Each satellite rotates in a full circle in a clockwise direction, then an exception is added for the middle satellite to rotate anti-clockwise. The transition in the first line of CSS sets the length of time that it should take to complete the transform, in this case two seconds. We used the same technique to turn the wind turbines and the triangle in the last icon of the set.

Next, we’ll show you how to create a maze with a ball that falls through the maze as it turns around.

.design span {
transition:all .7s ease .2s;
.design a:hover span {
.design a:hover {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);

This is quite a neat but simple effect; essentially the ball is only moving from left to right, but when we add the extra transform to rotate the whole maze this creates the appearance that the ball is falling. As well as setting the length of time that the transform should take (0.7 seconds), we also set a 0.2 second delay on the ball to make sure it doesn’t move before the maze turns as this would look unnatural. We used a similar technique to create the hourglass, although this had more elements to animate.

Potentially, we could have created all of the icons in pure CSS or SVG without the need for background images. However, we had a strict deadline and time didn’t allow it.

Give this a try or have a go at creating your own icons, then let us know how we’ve inspired you by leaving a comment below with a link to your icons.