Animate your site’s graphics using only SVG and CSS

First thing you may ask is, why should you animate a graphic. Well, animating logo or any graphic can be fun and useful both. It can look cool to super cool, can be used to grab attention on site load or can be used as loader animation on your website, like we do it here.

Why not use GIF or javascript?

GIFs are larger in size, of fix dimensions and can be performance hungry.

We don’t have anything particular against Javascript, but if we can achieve the goal without it then why not. In fact to achieve complex animations, javascript can become necessary.

CSS animations are smoother(using transform) and by using SVG we can have any size we want without pixelating.

Let’s start then

We are using our logo as loader animation

We are gonna get this animation done in this post. Let’s look at the steps one by one.

Breaking down the animation

First thing required is breaking down an animation into individual effects. If you look at the animation above, it has a total of 8 effects.

First, the background pops up from the center and then all the parts of ‘E’ and ‘Z’ becomes visible one by one.

For these effects to be applied independently, we will need all these parts independent from each other in the SVG code. Changes in one should not affect the other. Let’s get the SVG code first.

Get the graphic in SVG format

First thing we need is the graphic in SVG format.

This SVG code should have separate elements for each piece we want to animate independently.

For example, the logo used by Medium on their website is a single SVG path element. But to animate different parts independently, we need it to be the combination of multiple elements.

The graphic we are using here, Eduzebra’s logo, has 7 parts plus the background.

Our animation has 8 independent parts animating sequentialy

SVG code of the above image:

SVG code of the logo, see the ids of various parts

To get a image in this format, you can use any modern software which deals with vectors like Sketch or Adobe Illustrator. I used Sketch here.

One thing to consider is that you can’t just save or export a file as SVG, it will give you a single element file like the Medium logo. You will need to make the graphic using various parts individually. Then only you will get the desired SVG code.

Now that we have the SVG, let’s start coding

The HTML

There’s nothing much to do in the HTML code. We just need a container for the SVG code.

The SVG we got from Sketch has already given ids to all the elements. It’s same as the name of layers in sketch. Just consider these parts of SVG as normal DOM elements. We can give them classes or ids and can easily manipulate their properties using CSS. That’s what we are gonna do here.

We will be animating all the elements one by one.

Animating first element, the background

To make this easy that first comment out the remaining parts except the first one, that is the background, with id ‘background-color’.

CSS is where the the fun is, and work too. Each part including the background will have it’s separate declaration block and animation block.

Here is the code for the ‘background-color’ element:

Let’s break it down,

/* declaration block */
#background-color {
  transform-origin: center;
  animation-name: background-animation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

In this block, we define the properties for the ‘background-color’ element.

transform-origin: center;

It tells that the transformation will start from the center. We want the effect like the background is poping-up from the center.

animation-name: background-animation;
animation-duration: 4s;
animation-iteration-count: infinite;

These three lines tells about the animation on the ‘background-color’. As obivious, second line tells about the duration of animation and third tells about how many iterations we want which is infinite here.

The first one, animation-name, tells about which animation to use. In CSS we define an animation using @keyframes and use it by the property animation-name.

In @keyframes , we define an element’s properties at various moments of time specified in animation-duration. Means what should be the properties of the element after 10% of the time. The element animates from one state to another smoothly. We don’t have to worry about intermediate states.

@keyframes background-animation {
  0% {
       transform: scale(0);
     }
/* Finish changes by here */
  10% {
       transform: scale(1);
     }
/* Between 10% and 100%, nothing changes */
   100% {
       transform: scale(1);
     }
  }
}

Here we have defined the properties of the ‘background-color’ element in percentages of time.

At 0% of time, means at the start of the animation, the transform: scale(0) will scale the element to zero size and because of that the element will not be visible at the beginning.

At 10% of time, means after 0.4 second, the element will be at scale 1, it’s original size, because of transform: scale(1). The element will animate from zero size to original size in 0.4 second.

At 100% of time, the transform as it was at 10%, so there won’t be any change in the last 3.6 seconds. This ‘idle’ time is the time for other animations to finish.

Animating next element

Let’s remove the element from the commented out part and animate it.

The code for ‘part1’ will look like this:

As mentioned earlier, the declaration block tells about animation and transform-origin properties, not about the properties during animation. We declare those properties in the animation block. There is one slight change here though, we have declared all the animation properties in one single line. It just saves time and size of code.

Let’s break down the animation block of this part,

/* animation block */
@keyframes part1-animation {
  0% {
    transform: scaleY(0);
  }
   /* Don't start the animaion till this point */
  10% {
    transform: scaleY(0);
  }
   /* Finish changes by here */
  20% {
    transform: scaleY(1);
  }
   /* Between 20% and 100%, nothing changes */
  100% {
    transform: scaleY(1);
  }
}

At 0% of time, the transform: scale(0) make the element invisible.

At 10% of time, the transform property is still scale(0) means, the element will be invisible for the first 10% of time, i.e. 0.4 second. This the time to let animations of the previous part to finish.

At 20% of time, the element will be at scale 1. In the next 0.4 seconds, the element has animated from scale 0 to scale 1.

At 100% of time, the transform as it was at 20%. There won’t be any change in last 3.2 seconds.

So, for only first 2 elements, it will look like the animations are being performed in sequential way.

Repeating the process

We can the repeat the process for remaining elements to get the fully animated logo as visible in the start of this post.

This will be the final result.

Thanks for reading this. The animation here is relatively simple but that was enough for us. How complex and amazing animations can be achieved is only limited by one’s imagination.

Please feel free to give your feedback, critical feedbacks are most welcome.