Let’s get social

All Development

How to Rock Your Website with SVG Animations Using CSS Only?3 min read

May 13, 2019 2 min read

author:

How to Rock Your Website with SVG Animations Using CSS Only?3 min read

Reading Time: 2 minutes

Did you ever worried about how to push your limits and create a better user interaction?

You’ve probably used hover effects or sliding elements which are the most common use cases. But what about animating directly your SVG without having to use JavaScript at all?

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.

Why SVG?

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.

What is more, SVG’s are vectors, so they create no pixelization when scaling or zooming on different screen sizes. The greatest part of it is that you can create not so tough animations for your app or landing page and make it shine like a diamond, no JavaScript needed.

Practical Use Cases

Illustrations

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.

Icons

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.

Every part of the SVG can be brought to life with the help of CSS animations. Dynamic effects, just like making them in HTML, can be done using no JavaScript.

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!