1 00:00:08,624 --> 00:00:09,740 Hi, everybody. 2 00:00:09,740 --> 00:00:13,120 In this lecture we're going to talk about transitions. 3 00:00:13,120 --> 00:00:17,450 You've seen in different examples that we can change the state of elements. 4 00:00:17,450 --> 00:00:20,120 Links can go from regular link to visited. 5 00:00:20,120 --> 00:00:21,440 You can hover over things. 6 00:00:21,440 --> 00:00:22,930 You can focus them. 7 00:00:22,930 --> 00:00:26,840 Well, what if you want to actually have a little bit of almost animation 8 00:00:26,840 --> 00:00:28,460 when you do these things? 9 00:00:28,460 --> 00:00:30,210 That's what we can use transitions for. 10 00:00:31,220 --> 00:00:34,630 So if you hover over the link, you can change the color. 11 00:00:34,630 --> 00:00:36,195 If an image comes into focus, 12 00:00:36,195 --> 00:00:39,530 meaning you've tabbed into it, you can change the size. 13 00:00:39,530 --> 00:00:41,620 And it's just these little tiny things that sometimes, 14 00:00:41,620 --> 00:00:44,670 when you're making your page, gives you that little bit of cool factor that you've 15 00:00:44,670 --> 00:00:48,050 been looking for, to show that you're really starting to grasp these concepts. 16 00:00:49,220 --> 00:00:50,730 So let's get started. 17 00:00:50,730 --> 00:00:53,030 If you want to add transitions to your page, 18 00:00:53,030 --> 00:00:55,760 there's four properties that you're going to want to look at. 19 00:00:55,760 --> 00:00:58,390 The first is the actual transition property. 20 00:00:58,390 --> 00:00:59,640 What is it that you want to change? 21 00:00:59,640 --> 00:01:03,060 Do you want to change the size, the color, the position, all of them? 22 00:01:04,100 --> 00:01:06,310 What about the transition duration? 23 00:01:06,310 --> 00:01:08,760 How long should each transition last? 24 00:01:08,760 --> 00:01:12,230 They can happen very quickly, where people almost don't even notice it, or 25 00:01:12,230 --> 00:01:13,829 it can be really long and drawn out. 26 00:01:14,860 --> 00:01:19,020 The transition timing is, it's a little bit odd, but it's this idea of, 27 00:01:19,020 --> 00:01:22,520 if you're going to make something bigger, do you want to make it slowly bigger and 28 00:01:22,520 --> 00:01:26,180 linear all at the same time or do you want it to ease in or ease out? 29 00:01:26,180 --> 00:01:30,360 You can actually change how, kind of what speed it's doing the different things. 30 00:01:30,360 --> 00:01:32,737 Transition delay is, do you want me to wait, 31 00:01:32,737 --> 00:01:36,060 should the browser wait before it starts to transition? 32 00:01:36,060 --> 00:01:39,896 If somebody's hovering, do you want them to hover for two seconds before you go on? 33 00:01:39,896 --> 00:01:42,473 You might want to think about this, because sometimes when 34 00:01:42,473 --> 00:01:46,090 people are looking at your page, they've got, just got the mouse going all over. 35 00:01:46,090 --> 00:01:49,924 And you don't want to have them looking at the transitions unless they really need to 36 00:01:49,924 --> 00:01:51,561 be focusing in on that one element. 37 00:01:51,561 --> 00:01:52,780 All right. 38 00:01:52,780 --> 00:01:54,700 So let's go ahead and get started. 39 00:01:54,700 --> 00:01:57,530 If you want to use transitions, the first thing you need to do is 40 00:01:57,530 --> 00:02:00,790 just what you've been doing all along, define your element and 41 00:02:00,790 --> 00:02:03,590 say what style you want it to have when you first load the page. 42 00:02:05,130 --> 00:02:08,920 Next, you want to choose which elements you want to transition. 43 00:02:08,920 --> 00:02:13,180 So you may have styled it with background color, color, width, and height. 44 00:02:13,180 --> 00:02:16,120 You don't necessarily want to change all of those things 45 00:02:16,120 --> 00:02:18,000 when you go into your transition. 46 00:02:18,000 --> 00:02:19,790 So pick the ones that you do want to change. 47 00:02:21,110 --> 00:02:24,940 Third, define the new values for those elements. 48 00:02:24,940 --> 00:02:26,050 And this is important. 49 00:02:26,050 --> 00:02:28,990 You need to combine this step with a pseudo-class. 50 00:02:28,990 --> 00:02:32,820 It needs to be along with a hover or a focus or an active. 51 00:02:32,820 --> 00:02:34,980 So let's look at some code just on the screen, and 52 00:02:34,980 --> 00:02:37,496 then I'll run you through an actual example. 53 00:02:37,496 --> 00:02:41,410 So here, I've went, I went ahead and defined a div to just have color, 54 00:02:41,410 --> 00:02:45,680 background, line height, width height, all the typical things. 55 00:02:45,680 --> 00:02:47,830 If you notice, the border radius is pretty small. 56 00:02:47,830 --> 00:02:48,929 It's only six pixels. 57 00:02:50,300 --> 00:02:53,190 Next, I went in and I said, you know what, I'm going to go ahead and 58 00:02:53,190 --> 00:02:55,070 define each one of these properties. 59 00:02:55,070 --> 00:02:59,170 So my properties I want to change are going to be color, width, background, 60 00:02:59,170 --> 00:03:00,070 and border radius. 61 00:03:00,070 --> 00:03:02,890 This is kind of a lot, but I wanted a big example. 62 00:03:02,890 --> 00:03:05,720 You can say, I want it to take half a second, 63 00:03:05,720 --> 00:03:08,440 I want it to all be pretty much the same change, and 64 00:03:08,440 --> 00:03:13,960 I want you to wait a half a second before you start that transition. 65 00:03:13,960 --> 00:03:16,960 The last step, the one that had to do with the pseudo-class, 66 00:03:16,960 --> 00:03:22,440 was adding the div:hover and giving the new values that I want everything to be. 67 00:03:22,440 --> 00:03:25,060 So instead of being black, I want to switch it to white. 68 00:03:25,060 --> 00:03:28,870 Instead of the width being 250 pixels, I want it to be 350, 69 00:03:28,870 --> 00:03:32,300 different background color, and a much bigger border radius. 70 00:03:32,300 --> 00:03:33,470 All right? So let's go ahead and 71 00:03:33,470 --> 00:03:34,590 look at an example that I have. 72 00:03:34,590 --> 00:03:36,060 I already coded up to show you. 73 00:03:37,320 --> 00:03:40,190 So in this example I've used an internal style sheet, 74 00:03:40,190 --> 00:03:44,330 partly because the entire bulk of my HTML is right down here. 75 00:03:44,330 --> 00:03:46,490 All I have is one div. 76 00:03:46,490 --> 00:03:51,170 How I've styled it is to say that for now on when someone hovers over this div, 77 00:03:51,170 --> 00:03:55,143 I want you to change the color with background and border radius. 78 00:03:55,143 --> 00:03:56,536 And I've also put in active, 79 00:03:56,536 --> 00:04:00,340 just cuz I wanted to show you that you can do multiple different states. 80 00:04:00,340 --> 00:04:04,370 Active, if you've, maybe don't recall, is when you're clicking down on a state. 81 00:04:04,370 --> 00:04:05,980 So let's take a look. 82 00:04:05,980 --> 00:04:09,630 Here's my transition, just by default, when you're looking at the page. 83 00:04:09,630 --> 00:04:11,440 Now, when I mouse over it, 84 00:04:11,440 --> 00:04:15,050 you can see that it's kind of this cool change of color and border radius. 85 00:04:15,050 --> 00:04:18,030 Border radius actually can change things from looking like a square 86 00:04:18,030 --> 00:04:19,710 to looking like a circle. 87 00:04:19,710 --> 00:04:22,320 The final one is now I'm going to hold the mouse down and 88 00:04:22,320 --> 00:04:25,050 we're going to see what happens when the state goes into active. 89 00:04:26,882 --> 00:04:30,410 You can see, once again, I've changed all those things. 90 00:04:30,410 --> 00:04:32,350 I actually think this is pretty cool. 91 00:04:32,350 --> 00:04:34,590 It can also, however, be very distracting. 92 00:04:34,590 --> 00:04:37,070 So you want to use transitions sparingly 93 00:04:37,070 --> 00:04:39,240 to make sure you're not taking away things from your page. 94 00:04:40,390 --> 00:04:41,740 It is possible and 95 00:04:41,740 --> 00:04:46,100 very common to use shorthand when you're writing out your different transitions. 96 00:04:46,100 --> 00:04:48,250 Instead of writing transition duration, 97 00:04:48,250 --> 00:04:52,330 properties, different things like that, you can put it all in one line. 98 00:04:52,330 --> 00:04:56,780 This one is saying I want to change the background, it should take .2 seconds, and 99 00:04:56,780 --> 00:05:00,050 I want to ease out or I want it to be a linear transition. 100 00:05:00,050 --> 00:05:03,500 Here, it's saying I want to go ahead and change the border radius, how long it 101 00:05:03,500 --> 00:05:07,330 should take, the type of transition, and how long you want to delay. 102 00:05:07,330 --> 00:05:09,360 So when you look at other people's code, 103 00:05:09,360 --> 00:05:12,230 don't be confused if it doesn't look like my first example. 104 00:05:12,230 --> 00:05:13,890 They've probably been using the shortcuts. 105 00:05:15,780 --> 00:05:16,320 All right. 106 00:05:16,320 --> 00:05:18,910 So hopefully that was a little bit cool and you're excited to go and 107 00:05:18,910 --> 00:05:21,760 implement some sort of transitions on your page. 108 00:05:21,760 --> 00:05:24,670 Playing with them will also do more than make your site look kind of 109 00:05:24,670 --> 00:05:25,956 colorful and active. 110 00:05:25,956 --> 00:05:28,875 It's going to give you practice on understanding these different 111 00:05:28,875 --> 00:05:33,350 pseudo-classes and states such as active, focus, hover, etc. 112 00:05:33,350 --> 00:05:37,560 But please remember that accessibility is always going to be an issue 113 00:05:37,560 --> 00:05:39,980 when you're dealing with different states on page. 114 00:05:39,980 --> 00:05:43,140 Don't require that people are going to hover on your page. 115 00:05:43,140 --> 00:05:45,788 Don't require that people are going to tab through. 116 00:05:45,788 --> 00:05:48,670 You want to make sure that all your content is always available, and 117 00:05:48,670 --> 00:05:52,770 just keep those transitions for something a little bit extra to add to your site. 118 00:05:52,770 --> 00:05:53,270 Good luck.