[SOUND] Hey, everyone.

I'm Guil, a friend and design teacher here at Treehouse.

Did you know that SVG also supports interactivity and animation?

In this course, I'm gonna teach you how to animate SVG or

scalable vector graphics with CSS.

In the SVG Basics course,

you learned that SVG is made up of XML tags that render shapes and graphics.

You also got familiar with the SVG markup language, how to optimize SVG and

the variety of ways in which SVG content can be included in a web page.

If you haven't watched SVG basics and don't have experience working with SVG,

I highly recommend taking that course before continuing with this course,

because we're about to build with those concepts.

We can animate and interact with SVG, just like we're able to do with HTML.

SVG supports different methods for animation, but

we're gonna cover one of the most common methods using CSS transitions,

transforms and keyframe animations.

First, you're gonna learn how to animate shapes and SVG icons with CSS transitions

and transforms, then you'll create an SVG animation sequence using CSS keyframes and

animation properties.

Finally, you're gonna learn how SVG line animation works by creating a line drawing

animation using SVG stroke properties.

There are many creative ways you can use SVG animations on your website,

the possibilities are endless.

For example, you can animate icons, create engaging user interface interactions,

even build element animation sequences like this and more.

So, I'm excited to get you started animating SVGs.

So if you're ready to add surprise and delight to your web graphics with SVG and

CSS animations, let's get to it.