If you’re a front-end developer, you’ve probably been in situations where you need to animate elements on a page to create the amazing experience that your designers want. To animate, we can use the [transform](https://css-tricks.com/almanac/properties/t/transform/) property or the [animate](https://css-tricks.com/almanac/properties/a/animation/) property to move elements around.

When talking about animated elements, we often use SVG images because they allow us to scale up and down without losing quality. Here I’m going to share with you some cool tricks I found recently to use in animating SVGs.

---

Basic Animation

Let’s start with the basics. We’re going to create a simple bounce animation using keyframes and place the SVG directly onto the HTML.

CSS code for a bounce animation

As a result, we’ll get a nice bouncing ball. Nice — but you probably knew that already!

SVG with a bounce animation

---

The Animation Inside SVG Code

Now let’s check some cool things out. Did you know you could add styles inside an SVG? And those styles aren’t limited to just the color or background. We can add the whole animation inside it.

This would work with symbols as well, so you can have an animated SVG and import it easily across your site. You can use this easily for a circular loader image.

HTML code inserting an SVG. The animation is defined inside a ‘style’ tag.

#css-animation #css #programming #svg #html