Create an SVG Animation Using CSS

04/09/2014

A picture says a thousands words right? Well imagine what a picture can do that interacts with your viewers! Clean, simple SVG animations can be a great way to communicate with people in ways that text may fall short on.

We've created a quirky Einstein icon along with a few other animations on the Craftsy Culture and Careers pages to give potential employees a better understanding of what it's like to work here. These animations are a great way to represent who we are and what we do without literally spelling it out for viewers. They are fun, engaging designs that communicate on many different levels with our audience. So let's dive in and show you how to make an animated SVG icon.

See the Pen xlztC by Ryan Brandle (@brandledesign) on CodePen.



Step 1: Create an SVG

First off, you'll need a simple illustration to work with. An .eps or .ai file in Illustrator is perfect. The more simple the illustration the better. Try to optimize all the bits and pieces in your illustration by expanding any fills and strokes (object -> expand), then ungrouping your objects.

Select the pieces you want to be merged together as a single object. Usually I'll select objects of the same color, then use the pathfinder tool to unite the shapes as one. This simplifies the amount of paths that will appear in your svg, which reduces the amount of code used to redraw the image in a browser.

PathfinderSample

Once you have a nice, simple design with as few paths as possible, check out your layers palette, double click and name the specific paths you want to animate. Whatever you name these layers will end up being used as the id or class for that specific path when you convert to svg. I usually drag and drop the paths I'd like to animate into another layer, then dump all the other paths that are not being animated into a separate layer. This helps organize the code a little bit better so you don't have to do any path hunting when we get to the svg code.

Finally, crop your artboard to fit the edges of your svg so you don't have all that white space around it. This is basically the size your svg will be at 100%, but we don't need to worry too much about that since we'll adjust the size in our css if needed down the road.

Step 2: Save and optimize your SVG

When ready, go to file -> save as and save the file in SVG format. Another window will pop up with svg specific options to choose from. Select SVG 1.1 for your profile, set Type to SVG and click Embed for Image Location. Click OK and bangorang... you now have an svg file saved on your computer.

Open this new file in a text editor. My personal preference is Sublime 2. You'll see a large amount of code in this file. Too much for my liking... let's snip some out and clean this up a little. Delete everything above the svg bracket. This means the DOCTYPE and all the commented out info at the top. The only thing you need inside the svg tag is the xmlns and the viewbox information. Everything else can be stripped.

Next, start deleting group "g" tags. You don't need them. You should basically end up with an svg tag containing a bunch of paths, including a few with special class names that you'll use to animate. I like to delete all the extra white space between paths, except for my paths with class names. Break those away from the block just to make them stand out from the crowd a little and make it easier to find them in your code. Your svg should look something like this:

SvgSample

Kyle Foster has a great video that dives in deep svg optimization if you need more clarity. Simple enough? Good, let's move on to animating this tiny genius.

Step 3: Style and animate

This animation uses basic css3 animations and transforms. Properties like translate which moves the animation up, down, left or right on the X and Y axis, rotate and scale. You can get much more complicated with these, but keep in mind that the more moving parts you have going on in your animations, the more you sacrifice in performance. You don't want your animation to appear glitchy because you have a gazillion animations kicking in at the same time.

You can refer to the codepen area above or view it in a seperate window here for reference.

I placed the svg code inside two divs. The first one, .circle, is the container that holds everything and the second, .einstein, will contain the svg and determine it's size and placement inside the circle.

I've basically set up two states for my animation. There is a neutral state and a hover state. Let's start with Einstein's eyebrows. For the neutral state, I specified transition: all 0.4s; which directs all the transforms applied to that class will take .4 seconds to complete. I positioned the eyebrows by adjusting transform: translateY(3px) rotate(15deg); which moved them down 3px and rotated them slightly so they are leveled out a bit from their original state. The last thing you need is to declare your transform-origin: 60px 60px; which is basically where the "pivot point" will be when the path is rotated. 0px 0px would be the top left corner of your object.

Eyebrows

The eyebrows are not actually using the "animation" property, which involves setting keyframes (we'll cover this below :) Instead, they use the "transform" property, which makes things much less complicated because you just need to tell the class to go from point a to b. There's no c, d, e or f that you have to worry about.

So, when you hover over .circle, I want the eyebrows to return to their normal state. Add transform: translateY(0) rotate(0); and voila, your two states now transform from a to b! Einstein's tongue is basically the same thing except we use the scale property, transform: scaleX(1) scaleY(0); and return it to transform: scaleX(0) scaleY(0); when the user hovers over .circle.

EyebrowHover

Now to animate the blinking eyes. I wanted Einstein to blink every few seconds to encourage viewers to hover over him and get a funny surprise. This uses a similar but different technique from the eyebrows and tongue because we are using the "animation" property, not the "transform" property. Animations use set keyframes to control different parts of the animation and allow you to customize and alter the animation more so than a basic transform. Let's set up the blink animation:

BlinkKeyframes

You'll see in the code above that we've made his eyes squash to almost nothing at 1% and 60%. Now that the animation blink has some keyframes all we need to do is assign "blink" to Einstein's eyes:

Eyeblink

The animation: blink 8s infinite; commands our eye path to use the "blink" animation, play that out for 8 seconds, and repeat this animation forever. That's it! No need to add a hover state since I want him to just keep on blinking for all eternity. Kudos to Noah Blon for the blink animation.

Once again, check out the codepen above or visit my pen to view all the code you need to make this little dude. There are some extra comments in the code to help guide you along the way. That's all folks!

Comments (0)

The comments to this entry are closed.