Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
You can animate and interact with SVG just like you're able to do with HTML. SVG supports different methods for animation, but you're going to learn one of the most common methods: using CSS transitions, transforms, and keyframe animations.
Related Courses
[SOUND] Hey, everyone.
0:01
I'm Guil, a friend and
design teacher here at Treehouse.
0:04
Did you know that SVG also supports
interactivity and animation?
0:07
In this course,
I'm gonna teach you how to animate SVG or
0:12
scalable vector graphics with CSS.
0:15
In the SVG Basics course,
0:17
you learned that SVG is made up of XML
tags that render shapes and graphics.
0:19
You also got familiar with the SVG
markup language, how to optimize SVG and
0:24
the variety of ways in which SVG
content can be included in a web page.
0:29
If you haven't watched SVG basics and
don't have experience working with SVG,
0:33
I highly recommend taking that course
before continuing with this course,
0:37
because we're about to
build with those concepts.
0:41
We can animate and interact with SVG,
just like we're able to do with HTML.
0:43
SVG supports different methods for
animation, but
0:48
we're gonna cover one of the most
common methods using CSS transitions,
0:51
transforms and keyframe animations.
0:56
First, you're gonna learn how to animate
shapes and SVG icons with CSS transitions
0:58
and transforms, then you'll create an SVG
animation sequence using CSS keyframes and
1:03
animation properties.
1:08
Finally, you're gonna learn how SVG line
animation works by creating a line drawing
1:09
animation using SVG stroke properties.
1:14
There are many creative ways you can
use SVG animations on your website,
1:17
the possibilities are endless.
1:20
For example, you can animate icons, create
engaging user interface interactions,
1:22
even build element animation
sequences like this and more.
1:27
So, I'm excited to get you
started animating SVGs.
1:31
So if you're ready to add surprise and
delight to your web graphics with SVG and
1:35
CSS animations, let's get to it.
1:39
You need to sign up for Treehouse in order to download course files.
Sign up