Transitioning SVG Properties5:03 with Guil Hernandez
Icons are a great way to get started with SVG animation because they're perfect for simple interactions like hover states. We'll start by creating a CSS transition that animates icon fill colors on :hover.
First, I'm gonna show you how to transition SVG properties, 0:00 using CSS transitions. 0:03 To follow along, simply launch the work space associated with this video. 0:05 So, in my work space, 0:09 I have an HTML document containing three separate SVG icons. 0:11 So, here is the mark up for a gear icon. 0:16 Below that I have the mark up for a hammer icon, and then a Heart icon. 0:19 And in the style.css file, I have a base rule that targets 0:25 the SVG elements and applies a fluid width and a float for layout. 0:29 If I click my work space's Preview button, we can see what the gear, hammer, and 0:35 heart icons look like in the browser. 0:39 Pretty nice looking icons. 0:41 These are actually three of the many SVG icons used on the Treehouse homepage. 0:43 They were designed in a vector drawing tool, 0:49 like Illustrator, Inkscape, or Sketch. 0:51 So icons are a great way to get started with SVG Animation, 0:53 because they're perfect for simple interactions, like hover states. 0:57 So let's start by creating a CSS transition 1:01 that animates changes to the icon fill colors on Hover. 1:05 You can target and style SVG just like any other HTML element. 1:09 SVG uses different element tags than what you'll find in HTML, and 1:14 there are some CSS properties that are specific to just SVGs. 1:18 So before I create the transitions here in my CSS, 1:23 I'm going to assign classes to a few of my SVG elements. 1:26 This will make it easier to target and style them later with CSS. 1:30 So first, in the SVG mark up for the gear icon, I'm going to give the first 1:34 circle element here the class gear-bg. 1:41 This circle element is what draws the blue circular shape behind the gear icon, 1:46 so the class name gear-bg clearly communicates that. 1:52 So next, the adjacent path element here defines the shape of the gear icon itself. 1:56 So I'm going to give it the class gear-icon. 2:03 All right, so now I'll scroll down to the hammer icon and add similar class names. 2:13 So I'm going to give the first circle element the class hammer-bg, 2:18 and then I'll give the adjacent path element the class hammer-icon. 2:24 Then I'll scroll down to the heart icon. 2:34 And give the first circle shape, the class heart-bg. 2:39 And finally, I'll give the adjacent path element a class heart-icon. 2:46 So now, I can target these classes with CSS and 2:55 transition some of these attributes on Hover. 2:59 Now the icon fill colors are being applied with presentation attributes. 3:02 So for example, the fill attributes in the circle elements 3:06 set the colors for each of the circle shapes. 3:11 So, I'm going to transition each fill color to a different color with CSS. 3:14 In my style sheet under the GEAR comment, here, 3:23 I'm going to create a new rule that targets the class gear-bg on Hover. 3:28 I wanna change the elements fill color on Hover, so I need to use the SVG only 3:36 fill property, then I'll set the fill color to a darker shade of blue using 3:42 the hex value 3881cc. 3:48 So, when I save my style sheet, and refresh browser, we can see that on Hover, 3:55 the CSS overwrites the fill color defined in the elements fill attribute, and 4:01 changes it to that dark shade of blue. 4:06 So, now I'm going to add a transition to smooth out this abrupt color change 4:08 when I mouse over the gear and then mouse off of the gear. 4:13 To transition the fill color on both the hover on and hover off states, 4:18 I need to define a transition property for gear-bg. 4:22 So, I'm gonna target the class gear-bg, 4:27 and then I'm going to add a transition property. 4:29 And I'll set the transition duration to 0.3 seconds, and 4:35 then I'll set the transition timing function to ease-out. 4:39 That way, it starts the transition at full speed, then eases to a finish. 4:44 All right, so let's take a look. 4:49 I'll go back to the preview, hit refresh, and 4:50 when I hover over the circle, it looks good. 4:54 I not only get a nice fill transition on Hover, but also when I hover out. 4:57
You need to sign up for Treehouse in order to download course files.Sign up