1 00:00:00,310 --> 00:00:03,560 First, I'm gonna show you how to transition SVG properties, 2 00:00:03,560 --> 00:00:05,420 using CSS transitions. 3 00:00:05,420 --> 00:00:09,700 To follow along, simply launch the work space associated with this video. 4 00:00:09,700 --> 00:00:11,030 So, in my work space, 5 00:00:11,030 --> 00:00:16,190 I have an HTML document containing three separate SVG icons. 6 00:00:16,190 --> 00:00:19,110 So, here is the mark up for a gear icon. 7 00:00:19,110 --> 00:00:23,950 Below that I have the mark up for a hammer icon, and then a Heart icon. 8 00:00:25,260 --> 00:00:29,920 And in the style.css file, I have a base rule that targets 9 00:00:29,920 --> 00:00:35,140 the SVG elements and applies a fluid width and a float for layout. 10 00:00:35,140 --> 00:00:39,650 If I click my work space's Preview button, we can see what the gear, hammer, and 11 00:00:39,650 --> 00:00:41,770 heart icons look like in the browser. 12 00:00:41,770 --> 00:00:43,610 Pretty nice looking icons. 13 00:00:43,610 --> 00:00:49,130 These are actually three of the many SVG icons used on the Treehouse homepage. 14 00:00:49,130 --> 00:00:51,230 They were designed in a vector drawing tool, 15 00:00:51,230 --> 00:00:53,990 like Illustrator, Inkscape, or Sketch. 16 00:00:53,990 --> 00:00:57,650 So icons are a great way to get started with SVG Animation, 17 00:00:57,650 --> 00:01:01,450 because they're perfect for simple interactions, like hover states. 18 00:01:01,450 --> 00:01:05,040 So let's start by creating a CSS transition 19 00:01:05,040 --> 00:01:09,530 that animates changes to the icon fill colors on Hover. 20 00:01:09,530 --> 00:01:14,610 You can target and style SVG just like any other HTML element. 21 00:01:14,610 --> 00:01:18,790 SVG uses different element tags than what you'll find in HTML, and 22 00:01:18,790 --> 00:01:23,180 there are some CSS properties that are specific to just SVGs. 23 00:01:23,180 --> 00:01:26,890 So before I create the transitions here in my CSS, 24 00:01:26,890 --> 00:01:30,660 I'm going to assign classes to a few of my SVG elements. 25 00:01:30,660 --> 00:01:34,620 This will make it easier to target and style them later with CSS. 26 00:01:34,620 --> 00:01:41,030 So first, in the SVG mark up for the gear icon, I'm going to give the first 27 00:01:41,030 --> 00:01:46,770 circle element here the class gear-bg. 28 00:01:46,770 --> 00:01:52,910 This circle element is what draws the blue circular shape behind the gear icon, 29 00:01:52,910 --> 00:01:56,980 so the class name gear-bg clearly communicates that. 30 00:01:56,980 --> 00:02:03,640 So next, the adjacent path element here defines the shape of the gear icon itself. 31 00:02:03,640 --> 00:02:07,906 So I'm going to give it the class gear-icon. 32 00:02:13,068 --> 00:02:18,310 All right, so now I'll scroll down to the hammer icon and add similar class names. 33 00:02:18,310 --> 00:02:24,052 So I'm going to give the first circle element the class hammer-bg, 34 00:02:24,052 --> 00:02:30,000 and then I'll give the adjacent path element the class hammer-icon. 35 00:02:34,107 --> 00:02:36,691 Then I'll scroll down to the heart icon. 36 00:02:39,742 --> 00:02:46,830 And give the first circle shape, the class heart-bg. 37 00:02:46,830 --> 00:02:55,360 And finally, I'll give the adjacent path element a class heart-icon. 38 00:02:55,360 --> 00:02:59,060 So now, I can target these classes with CSS and 39 00:02:59,060 --> 00:03:02,100 transition some of these attributes on Hover. 40 00:03:02,100 --> 00:03:06,790 Now the icon fill colors are being applied with presentation attributes. 41 00:03:06,790 --> 00:03:11,210 So for example, the fill attributes in the circle elements 42 00:03:11,210 --> 00:03:14,680 set the colors for each of the circle shapes. 43 00:03:14,680 --> 00:03:18,954 So, I'm going to transition each fill color to a different color with CSS. 44 00:03:23,455 --> 00:03:28,112 In my style sheet under the GEAR comment, here, 45 00:03:28,112 --> 00:03:35,054 I'm going to create a new rule that targets the class gear-bg on Hover. 46 00:03:36,990 --> 00:03:42,800 I wanna change the elements fill color on Hover, so I need to use the SVG only 47 00:03:42,800 --> 00:03:48,240 fill property, then I'll set the fill color to a darker shade of blue using 48 00:03:48,240 --> 00:03:53,200 the hex value 3881cc. 49 00:03:55,260 --> 00:04:01,600 So, when I save my style sheet, and refresh browser, we can see that on Hover, 50 00:04:01,600 --> 00:04:06,280 the CSS overwrites the fill color defined in the elements fill attribute, and 51 00:04:06,280 --> 00:04:08,900 changes it to that dark shade of blue. 52 00:04:08,900 --> 00:04:13,880 So, now I'm going to add a transition to smooth out this abrupt color change 53 00:04:13,880 --> 00:04:17,290 when I mouse over the gear and then mouse off of the gear. 54 00:04:18,370 --> 00:04:22,690 To transition the fill color on both the hover on and hover off states, 55 00:04:22,690 --> 00:04:27,020 I need to define a transition property for gear-bg. 56 00:04:27,020 --> 00:04:29,630 So, I'm gonna target the class gear-bg, 57 00:04:29,630 --> 00:04:34,020 and then I'm going to add a transition property. 58 00:04:35,390 --> 00:04:39,410 And I'll set the transition duration to 0.3 seconds, and 59 00:04:39,410 --> 00:04:44,790 then I'll set the transition timing function to ease-out. 60 00:04:44,790 --> 00:04:49,050 That way, it starts the transition at full speed, then eases to a finish. 61 00:04:49,050 --> 00:04:50,600 All right, so let's take a look. 62 00:04:50,600 --> 00:04:54,360 I'll go back to the preview, hit refresh, and 63 00:04:54,360 --> 00:04:57,890 when I hover over the circle, it looks good. 64 00:04:57,890 --> 00:05:02,190 I not only get a nice fill transition on Hover, but also when I hover out.