How to Rock Your Website with SVG Animations Using CSS Only?
Did you ever worried about how to push your limits and create a better user interaction?
If you’re eager to know how, you’re at the right place, or if this is still too advanced for you, you can go check
our previous article about CSS beginners.
Animations are a thrill, aren’t they? Improving the user experience, they can absolutely rock a website.
The reason why we talk about animating SVG instead of using GIFs or videos is the performance. You’ll have less HTTP requests which means the page will load faster.
Practical Use Cases
Illustrations are widely used cases in the design world. They can demonstrate what to do in order to use an app or take an action on a page. Animated stickers for example will brighten up your website bringing not only fun, but also knowledge to the users.
Another case are the icons which are helpful when we want to guide a customer to the next action, or when we want to show a state change. Animated SVGs are great for that.
Cool! How can we do that?
The easiest way – animate.css from Daniel Eden
If you want to make an icon to pulse, just write something like this:
<path class=”animated pulse infinite”>
and that’s all the effort.
Animate like a Pro
Before styling your SVG with code, it is recommended to prepare your SVG, meaning to simplify the SVG code.
Once you’re familiar with the SVG code, you have to animate it with CSS just like animating any other element in HTML. For example you can use transitions, keyframe animations, or transforms.
Another advantage of SVG is that words in the picture are kept in <text> tag, so we can search, select and access them. They can also be directly edited in the code. However, we should not forget to embed the needed font face so as to be sure it will be rendered.
Another thing to remember is that SVGs have own DOM API, which means that all the code can be inspected using DevTools (it is strongly recommended to use them when further examining this topic).
For a final, we have found a great presentation showing animated SVGs and all the steps you have to follow so as to make them move, including how to simplify the code at the beginning.
Thanks a lot, Aga Naplocha!