How To Create An SVG Animation Sequence in CSS
Step-by-step instructions
Scalable Vector Graphics (SVG) are an XML based markup that can contain two-dimensional vectors. The vectors can be simple shapes, paths, or well just about anything you can do in Illustrator. It’s an image format that has more in common with a web page that it does with a JPEG. SVG is much more powerful than other image formats we can use on the web as we can manipulate them with code (either in our text editor or with CSS / JS).
The next question we often ask, however , is how do we move beyond just styling a static (SVGs can be also made responsive) image and into creating something that has more visual interest, e.g., something with animation and can be interactive. Here’s how to get started:
1. Bringing SVGs into our File with HTML or CSS
SVGs can be embedded directly into an HTML document or brought in via CSS, much like traditional jpg or png files. In this case, we can story them in an image folder and provide a link to them using the <img> tag in much the same way that you might with other image sources you’ve used in the past.
HTML Example:
With this example here, you have set an HTML element to a page, but the element will show at the default size of the image. Here’s is my example:
You’ll see that this image displays very nicely because of its vector status, but if we want to make changes to it, we need to style it with CSS.
2. Adding CSS To An SVG
If you bring an svg into your code via html as in the example above, the easiest thing to do is to simply supply a parent div/class to that element and then begin to add css styling on that element. Here is my example:
With this parent div in place, this code will give me a vector-sized image that is much easier to handle. Here is the result:
3. Styling Individual Parts of an SVG element
SVG elements can be imported into HTML in much the same way you would anything else. Expect it to be long, and complicated looking — not to fear, what you’re looking at is essentially just all the different parts of image that was exported. Here is an example:
Just like we did before, the image will display like the default. The difference, however, is that we can add classes or ids to the different elements and add svg-specific styling. For readability purposes, I recommend that you place each tag inside of this svg on its own line. This will make it each easier to follow and for you to add styling without making mistakes.
Once you do that, you should be able to read things a little bit easier. Before going any further though, I recommend installing a package on your text editor (if not there already) that will show you the color of the different elements in your code. For Sublime, this package is known as Color Highlight.
Color Highlight will allow you to see code that looks like this:
So now all we need to do is to simply add classes on to our code so that we can style these elements in CSS as normal. Here is an example:
Common SVG Styling Properties
The most common properties styled for SVGs are:
1: fill (color)
2. stroke & stroke-width (much like in Adobe Illustrator)
Inline styling CSS can also be applied, but if used externally, these are the most commonly applied.
4. Decide What/How to Display an SVG on Different Screen Sizes and Resolutions
SVGs can be manipulated by media queries quite nicely. The question will be, do you want to make changes to different parts of your image at different screen sizes. You might not think to do this, but the argument for making changes is that at different screen sizes, different details of your vector will be easier to see. Here is a quick mockup of the code you might use:
5. Setting Animations on SVGs
When it comes to animation, a lot of the same principles apply to SVGs as they do to other elements in HTML/CSS. The ability to add styling on to individual elements opens up really great possibilities for displaying information that we might not have thought of otherwise. The important takeaway should be, however, that svg elements can be added via
- Embedded SVGs
- Inline SVG
- CSS background image
But we can only animate inline SVG with CSS
Transitioning SVG Properties
Styling Fill Color on Hover
- First add classes to the elements you want to style.
- Add the fill color you want on hover by adding the pseuo class hover to an element
- Add the type of transition you want on the main element. You should have something like this:
This will provide you some control over the color effect.
Creating Multi-Property Animations
Creating animations that have multiple properties affected is fairly straightforward. Let’s take the following example:
With this example, my goal is to simply make a gear-icon spin when you . hover over it. To do that, I’ve told the browser to rotate and to grow in size the gear icon when you hover over the gear. To do that, I’ve added a transform property to the gear and gear-icon that will rotate the image 45 degrees and then to make it grow by 30%. Aside from that, I’ve also set the position from which I want the the element to transform from.
Why are we doing this?
In HTML , the default transform-origin is 50% 50% (in the middle of its parent div), whereas with svgs, it is 0 0 (the top left corner). To override this, you need to either set it to 50% 50, or whatever position that you want.
To be clear, getting the transform-origin correct can be a bit of a pain in the butt, can the benefits are clearly worth it. Here is my result:
Advanced Animation Sequences
If you want to make something like this, I highly recommend that you plan these out ahead of time. Knowing what your interactions should look like before you create them is going to allow you to narrow down any issues you have and to create a greater amount of control and customization over your project. Don’t be afraid to go to sites like codepen.io to find inspiration. There you will find countless animations that have been created. Here’s how I made this one.
- Adding the class names to the parts of my image that I want to change.
- Nest elements that you want to have interract together using the <g></g> tag. This tag will allow you to group elements together. Be sure to add a class name on to this as well.
- Begin to build out keyframes that you need. Be sure to give them descriptive names that allow you to know what effects are occurring when you apply them.
In this keyframe (keyframes create animations), I’ve named it grow because this one is meant to affect the size of the element across its animation lifecycle. With animations, they will always begin with keyframes and then a name. The name is up to you, but be sure to make it something that is clear to you. From there, the numbers represent different places in the lifecycle. You will notice that I’ve made it scale to 1.1 at 30% and then back to 0.9 at 60%, this is because I want to create a natural bounce affect.
4. Decide what classes you want to add this animation to.
In this example, what I have done is added the property animation that allows me to attach the keyframe I just created to a specific element and then I have told it how long I want it to run (1s) and then added a timing function. There are many types of timing-functions, so I suggest checking the documentation, ease-out is one example.
5. Add a slight delay to your animations so they don’t all run at the same time. To do this, you’ll want to look back to your plan to decide what you want to animate first, what second, etc. From there, you will want to add the css property, animation-delay.
5. Set the transform-origin in the CSS to indicate from where you want the element to fire its animation. As I said, 50% 50% will place it in the middle.
Pro tip: If the cx and cy properties in the svg in the html are set to 180, that means they are in the middle already. Check this before messing with the transform-origin.
And that’s basically it! If you want to see how the rest of the icon was created, please feel free to contact me at youngerik26@gmail.com or find me on LinkedIn, and I’d be happy to share it with you.