Course Overview

[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