1 00:00:02,080 --> 00:00:06,150 As you see it on our card, if we hover over it, 2 00:00:06,150 --> 00:00:10,360 the size immediately changes. So there is no transition, 3 00:00:10,360 --> 00:00:14,210 no smoothening of this increase in size effect. 4 00:00:14,210 --> 00:00:16,826 Typically when adding such transformation still, 5 00:00:16,826 --> 00:00:20,020 you want to have a specific transition, 6 00:00:20,020 --> 00:00:23,450 a specific way of how the initial state 7 00:00:23,450 --> 00:00:26,476 of your element transits into the well 8 00:00:26,476 --> 00:00:29,320 transformed state. So to say. 9 00:00:29,320 --> 00:00:32,850 And for this, we need CSS transitions. 10 00:00:32,850 --> 00:00:35,649 One note before diving into these, 11 00:00:35,649 --> 00:00:39,530 the code required to implement the transition 12 00:00:39,530 --> 00:00:43,360 is applied to the initial state of the element, 13 00:00:43,360 --> 00:00:47,290 not on the event, triggering the transition. 14 00:00:47,290 --> 00:00:49,573 This means, by going back to the code, 15 00:00:50,580 --> 00:00:53,600 instead of adding the transition logic 16 00:00:53,600 --> 00:00:56,110 to our hover pseudo selector here, 17 00:00:56,110 --> 00:00:58,970 so this is the so-called triggering event, 18 00:00:58,970 --> 00:01:01,290 we hover over the card container, 19 00:01:01,290 --> 00:01:03,350 then something should happen. 20 00:01:03,350 --> 00:01:06,370 The transition has to be defined in the card 21 00:01:06,370 --> 00:01:09,130 container here in our case, so in the default 22 00:01:09,130 --> 00:01:11,549 state of this card container. 23 00:01:11,549 --> 00:01:14,770 Because only by defining the transition, 24 00:01:14,770 --> 00:01:17,331 initially it can be applied 25 00:01:17,331 --> 00:01:20,340 once the triggering event, so the hover effect 26 00:01:20,340 --> 00:01:22,920 comes into play, so that's an important thing 27 00:01:22,920 --> 00:01:25,970 to keep in mind, you define the transformation, 28 00:01:25,970 --> 00:01:28,920 so to transform property on the state of the 29 00:01:28,920 --> 00:01:30,930 element that transforms it, 30 00:01:30,930 --> 00:01:33,600 the rest definition of the transition happens 31 00:01:33,600 --> 00:01:35,570 in the initial state. 32 00:01:35,570 --> 00:01:37,210 You'll see this in a few seconds, of course, 33 00:01:37,210 --> 00:01:39,570 how it works. It's just important to keep 34 00:01:39,570 --> 00:01:41,003 this difference in mind. 35 00:01:42,340 --> 00:01:44,380 Now, back on the slide, 36 00:01:44,380 --> 00:01:46,860 we can now have a quick look at what 37 00:01:46,860 --> 00:01:48,563 such a transition looks like. 38 00:01:49,870 --> 00:01:52,670 This is basically a complete definition 39 00:01:52,670 --> 00:01:55,840 of a transition. As you see transition here 40 00:01:55,840 --> 00:01:57,510 to the left written in white 41 00:01:57,510 --> 00:02:00,350 is another normal property just 42 00:02:00,350 --> 00:02:02,720 as transform was. 43 00:02:02,720 --> 00:02:04,610 But this property is a so-called, 44 00:02:04,610 --> 00:02:07,420 shortend containing four different 45 00:02:07,420 --> 00:02:11,800 key areas that define a transition. 46 00:02:11,800 --> 00:02:14,470 The first area is the orange one here. 47 00:02:14,470 --> 00:02:16,653 This is the so-called property. 48 00:02:17,690 --> 00:02:21,140 In our case, we have the transform property 49 00:02:21,140 --> 00:02:23,550 because for our project, we want to add 50 00:02:23,550 --> 00:02:26,820 a transition to the transformation 51 00:02:26,820 --> 00:02:28,185 of our card container, 52 00:02:28,185 --> 00:02:31,340 so here to the increase of the size 53 00:02:31,340 --> 00:02:32,893 of this card container. 54 00:02:33,860 --> 00:02:37,320 You can also add different properties here, though. 55 00:02:37,320 --> 00:02:40,050 For example, we could also say that once 56 00:02:40,050 --> 00:02:43,030 we hover over a certain element, 57 00:02:43,030 --> 00:02:45,540 the background color should change. 58 00:02:45,540 --> 00:02:48,120 We see this for example, here on our button. 59 00:02:48,120 --> 00:02:50,470 If I hover over here, the background color 60 00:02:50,470 --> 00:02:53,350 becomes blue and there we could also 61 00:02:53,350 --> 00:02:55,140 add a transition. We will also have a 62 00:02:55,140 --> 00:02:57,245 look at this, of course, but the idea here is 63 00:02:57,245 --> 00:03:01,030 that the property definition here, 64 00:03:01,030 --> 00:03:03,870 as a value in transition property 65 00:03:03,870 --> 00:03:06,710 can be based on different properties, 66 00:03:06,710 --> 00:03:09,910 transform is just an example here. 67 00:03:09,910 --> 00:03:12,792 The second value we can define in the shortend 68 00:03:12,792 --> 00:03:14,944 is the so-called duration. 69 00:03:14,944 --> 00:03:17,990 Well, as the name indicates, how long 70 00:03:17,990 --> 00:03:21,420 should the change of the property defined in the 71 00:03:21,420 --> 00:03:23,253 first position here, take. 72 00:03:24,640 --> 00:03:26,774 The third value to define is 73 00:03:26,774 --> 00:03:30,030 the so-called timing function. 74 00:03:30,030 --> 00:03:32,060 Timing function here is set 75 00:03:32,060 --> 00:03:35,400 to ease out. That's not the default case. 76 00:03:35,400 --> 00:03:38,150 Ease out here simply means that the transition 77 00:03:38,150 --> 00:03:40,840 starts fast and ends slowly. 78 00:03:40,840 --> 00:03:42,720 So ease out. 79 00:03:42,720 --> 00:03:44,140 Ease in on the other hand 80 00:03:44,140 --> 00:03:46,180 would mean that the transition starts 81 00:03:46,180 --> 00:03:48,690 slow and then builds up speed. 82 00:03:48,690 --> 00:03:50,746 The default value here would be ease, 83 00:03:50,746 --> 00:03:54,400 this would be an evenly distributed 84 00:03:54,400 --> 00:03:56,240 transition period. 85 00:03:56,240 --> 00:03:58,130 You don't have to define this therefore, 86 00:03:58,130 --> 00:04:00,743 but you can do so. And we will also do so. 87 00:04:01,870 --> 00:04:04,890 The last value to define is the delay. 88 00:04:04,890 --> 00:04:07,770 So this simply means if I hover over 89 00:04:07,770 --> 00:04:09,950 the element here, in our example, 90 00:04:09,950 --> 00:04:12,887 should the transition be immediately executed 91 00:04:12,887 --> 00:04:15,570 and therefore also the transformation, our case, 92 00:04:15,570 --> 00:04:18,209 or should it have a delay that we can define 93 00:04:18,209 --> 00:04:19,803 right here in seconds. 94 00:04:20,950 --> 00:04:24,010 This is how transitions work in theory. 95 00:04:24,010 --> 00:04:26,130 Let's now add this transition logic 96 00:04:26,130 --> 00:04:29,200 to our existing transformation on the hover 97 00:04:29,200 --> 00:04:31,920 effect of the card container. 98 00:04:31,920 --> 00:04:35,660 For this I'm back in the code, and as I said, 99 00:04:35,660 --> 00:04:38,020 in contrast to the transformation, 100 00:04:38,020 --> 00:04:40,210 the transition has to be applied to 101 00:04:40,210 --> 00:04:42,360 the initial state, so here to our 102 00:04:42,360 --> 00:04:43,993 card container class. 103 00:04:44,960 --> 00:04:48,220 For this, we add the transition property, 104 00:04:48,220 --> 00:04:50,390 as I said, it's a completely normal 105 00:04:50,390 --> 00:04:52,960 property that we have. And the first thing 106 00:04:52,960 --> 00:04:55,780 to define is the property that should be 107 00:04:55,780 --> 00:04:58,640 affected by this transition. 108 00:04:58,640 --> 00:05:00,730 And therefore I emphasize that, 109 00:05:00,730 --> 00:05:03,600 that we have to define this transition property 110 00:05:03,600 --> 00:05:06,440 on the initial state of the element. 111 00:05:06,440 --> 00:05:09,317 Because here we want to define 112 00:05:09,317 --> 00:05:11,530 the transition of our 113 00:05:11,530 --> 00:05:14,530 transform property 114 00:05:14,530 --> 00:05:15,896 that we use for our 115 00:05:15,896 --> 00:05:19,680 hover effect on the card container class. 116 00:05:19,680 --> 00:05:23,240 So in contrast to the transform property here, 117 00:05:23,240 --> 00:05:25,870 which we define when the triggering event, 118 00:05:25,870 --> 00:05:27,930 so this hover effect comes into play 119 00:05:27,930 --> 00:05:29,290 or takes place. 120 00:05:29,290 --> 00:05:32,670 The transition property has to be defined 121 00:05:32,670 --> 00:05:35,480 for the element that wants to use this 122 00:05:35,480 --> 00:05:37,940 transition later on, so here, for example, 123 00:05:37,940 --> 00:05:39,493 for our transform effect. 124 00:05:40,370 --> 00:05:42,640 Of course, this effect would then also 125 00:05:42,640 --> 00:05:45,400 be available for nested elements. 126 00:05:45,400 --> 00:05:47,660 So if you want to add a hover effect for 127 00:05:47,660 --> 00:05:49,100 the H one element, for example, 128 00:05:49,100 --> 00:05:51,400 further down, this would also work. 129 00:05:51,400 --> 00:05:54,263 I'll show you this a bit later in this lecture though. 130 00:05:55,220 --> 00:05:56,053 So in our case, we want to define the transition 131 00:05:56,053 --> 00:05:59,763 of this transform property. 132 00:06:00,690 --> 00:06:03,850 This means we cannot define the second value 133 00:06:03,850 --> 00:06:04,683 in 134 00:06:04,683 --> 00:06:06,050 this 135 00:06:06,050 --> 00:06:06,883 property, 136 00:06:06,883 --> 00:06:10,340 which was the duration of this transition. 137 00:06:10,340 --> 00:06:12,320 And for this, I'll take a very long value 138 00:06:12,320 --> 00:06:16,283 of two seconds, now, just to demonstrate this feature. 139 00:06:17,490 --> 00:06:19,500 Now we have the timing function, 140 00:06:19,500 --> 00:06:22,278 so if the transition should start fast and, 141 00:06:22,278 --> 00:06:25,600 and slow or the other way around, 142 00:06:25,600 --> 00:06:27,830 or it should be evenly distributed. 143 00:06:27,830 --> 00:06:30,070 if we don't define anything here, 144 00:06:30,070 --> 00:06:32,003 ease would be the default case, 145 00:06:32,930 --> 00:06:35,440 but we can also use something like ease out, 146 00:06:35,440 --> 00:06:39,448 for example, with that, it would start fast and, 147 00:06:39,448 --> 00:06:43,370 and slowly, we'll also do this here. 148 00:06:43,370 --> 00:06:46,540 And finally, we can optionally add a delay 149 00:06:46,540 --> 00:06:49,030 for example of one second here, 150 00:06:49,030 --> 00:06:52,120 I'll keep this for reference, we might get rid 151 00:06:52,120 --> 00:06:54,000 of that delay though, 152 00:06:54,000 --> 00:06:55,023 in a few seconds. 153 00:06:56,040 --> 00:06:58,660 With this, we implemented the transition 154 00:06:58,660 --> 00:07:01,530 with all our four values, so the property 155 00:07:01,530 --> 00:07:02,410 it refers to 156 00:07:04,030 --> 00:07:05,600 the duration 157 00:07:05,600 --> 00:07:07,960 the timing function and the delay. 158 00:07:07,960 --> 00:07:09,880 And by going back to the project 159 00:07:11,320 --> 00:07:13,923 and by hovering over our card container, 160 00:07:15,770 --> 00:07:18,920 you see that initially nothing is happening 161 00:07:18,920 --> 00:07:20,810 and then we have a fast start, 162 00:07:20,810 --> 00:07:24,170 but a slow ending of the transformation. 163 00:07:24,170 --> 00:07:26,530 If I go back and maybe increase 164 00:07:26,530 --> 00:07:30,510 the scale to 10% here, so one dot one, 165 00:07:30,510 --> 00:07:33,380 then it should become even more obvious. 166 00:07:33,380 --> 00:07:36,283 So let's change this and let's go back then. 167 00:07:37,230 --> 00:07:41,250 And now I hover over the card, nothing happens, 168 00:07:41,250 --> 00:07:46,250 now it starts fast and fades out slowly so to say, 169 00:07:46,350 --> 00:07:47,690 so you can see it. 170 00:07:47,690 --> 00:07:49,970 If we move away, this has a slight delay. 171 00:07:49,970 --> 00:07:51,420 Then it becomes small, 172 00:07:51,420 --> 00:07:53,380 again, if I hover over it, 173 00:07:53,380 --> 00:07:56,082 it starts fast and, and ends slow. 174 00:07:56,082 --> 00:07:59,880 For this, we can actually also get rid of our delay, 175 00:07:59,880 --> 00:08:01,700 I don't think we need this here. 176 00:08:01,700 --> 00:08:04,220 And also the period is way too long 177 00:08:04,220 --> 00:08:07,600 I just go with a value of zero dot five seconds here, 178 00:08:07,600 --> 00:08:10,760 because this makes it well a lot smoother, actually. 179 00:08:10,760 --> 00:08:11,670 And by the way, 180 00:08:11,670 --> 00:08:14,680 you can also find more information about the transition 181 00:08:14,680 --> 00:08:18,870 property and also about different timing functions we have 182 00:08:18,870 --> 00:08:21,060 attached to this lecture. 183 00:08:21,060 --> 00:08:23,120 So let's go back once again 184 00:08:23,120 --> 00:08:25,000 and let's see what this looks like. 185 00:08:25,000 --> 00:08:26,750 Yeah. I think this looks all right. 186 00:08:28,400 --> 00:08:30,833 Actually, we can't even make it a bit 187 00:08:30,833 --> 00:08:33,230 smaller from the scale size. 188 00:08:33,230 --> 00:08:36,200 So let's also go back to one dot zero five, 189 00:08:36,200 --> 00:08:37,140 so 5%, 190 00:08:38,970 --> 00:08:41,400 As mentioned before, we can also use 191 00:08:41,400 --> 00:08:43,933 this transform effect, including the transition 192 00:08:43,933 --> 00:08:47,312 on other elements, which are nested into 193 00:08:47,312 --> 00:08:50,280 the card container in our case. 194 00:08:50,280 --> 00:08:52,850 So for example, if I go down now to the 195 00:08:52,850 --> 00:08:54,770 H one element 196 00:08:54,770 --> 00:08:56,280 and here at a 197 00:08:57,300 --> 00:08:59,570 hover pseudo class, 198 00:08:59,570 --> 00:09:03,890 and basically cut out the transform property 199 00:09:03,890 --> 00:09:06,960 from our hover effect for the card container 200 00:09:06,960 --> 00:09:08,870 and paste this here, 201 00:09:08,870 --> 00:09:09,970 if I now go back 202 00:09:11,010 --> 00:09:14,300 then by hovering over our H one element, 203 00:09:14,300 --> 00:09:15,650 can you see it? 204 00:09:15,650 --> 00:09:18,260 The effect also takes place. 205 00:09:18,260 --> 00:09:20,020 So this is what I meant before. 206 00:09:20,020 --> 00:09:22,890 You have to define this transition logic 207 00:09:22,890 --> 00:09:25,890 on the element you want to use it on, 208 00:09:25,890 --> 00:09:28,560 but this also can be used in for elements 209 00:09:28,560 --> 00:09:30,990 nested into this element where 210 00:09:30,990 --> 00:09:32,623 the transition was defined. 211 00:09:33,830 --> 00:09:35,010 Well in our case still, 212 00:09:35,010 --> 00:09:37,840 we can actually cut this out again 213 00:09:37,840 --> 00:09:40,760 and add it back to the card container hover effect 214 00:09:40,760 --> 00:09:43,850 and we can also get rid of the H one hover 215 00:09:43,850 --> 00:09:44,693 selector here. 216 00:09:45,870 --> 00:09:47,880 Before we finish our transition 217 00:09:47,880 --> 00:09:49,410 and transform logic, though, 218 00:09:49,410 --> 00:09:51,360 there is one last thing that I would 219 00:09:51,360 --> 00:09:52,400 like to show you, 220 00:09:52,400 --> 00:09:54,650 and this is this property here 221 00:09:54,650 --> 00:09:56,353 inside the transition property. 222 00:09:57,610 --> 00:10:00,050 As mentioned, we are using a transform property 223 00:10:00,050 --> 00:10:01,830 here for our purpose, 224 00:10:01,830 --> 00:10:05,120 but we can also use other properties. 225 00:10:05,120 --> 00:10:07,660 For example, instead of transform, 226 00:10:07,660 --> 00:10:09,530 we could say that we want to change 227 00:10:09,530 --> 00:10:11,840 our background color. 228 00:10:11,840 --> 00:10:13,603 So we add this property here. 229 00:10:14,468 --> 00:10:16,740 We can then quickly comment out 230 00:10:16,740 --> 00:10:20,276 our transform property for the hover effect 231 00:10:20,276 --> 00:10:22,930 because now instead of transform, 232 00:10:22,930 --> 00:10:26,280 we want to use the background color property 233 00:10:26,280 --> 00:10:28,330 for this transition. 234 00:10:28,330 --> 00:10:29,558 So we could say 235 00:10:29,558 --> 00:10:32,318 that the background color here, 236 00:10:32,318 --> 00:10:35,430 so we just use the normal property 237 00:10:35,430 --> 00:10:37,840 should change to yellow, for example, 238 00:10:37,840 --> 00:10:39,460 which won't look good, but it will show 239 00:10:39,460 --> 00:10:41,253 you easily how this works. 240 00:10:42,630 --> 00:10:47,510 Now, in our project, if we hover over our card, 241 00:10:47,510 --> 00:10:49,550 you'll see that the color 242 00:10:49,550 --> 00:10:51,830 changes with this transition. 243 00:10:51,830 --> 00:10:54,260 Can you see it? It's not an immediate change, 244 00:10:54,260 --> 00:10:57,130 but it has this nice transition effect. 245 00:10:57,130 --> 00:11:00,210 If I would go back and comment out, 246 00:11:00,210 --> 00:11:02,273 the transition in the card container, 247 00:11:04,190 --> 00:11:07,410 now save this and go back once again, 248 00:11:07,410 --> 00:11:09,400 if I now hover over the card, 249 00:11:09,400 --> 00:11:11,970 the color changes immediately, 250 00:11:11,970 --> 00:11:14,570 and this doesn't look as smooth as it does 251 00:11:14,570 --> 00:11:16,843 with the transition being added. 252 00:11:17,810 --> 00:11:19,260 Let's go back though. 253 00:11:19,260 --> 00:11:22,280 And let's comment this in here 254 00:11:23,130 --> 00:11:24,780 and let's change the property 255 00:11:24,780 --> 00:11:28,403 back to our transform property. 256 00:11:29,760 --> 00:11:31,690 And let's also delete the background 257 00:11:31,690 --> 00:11:34,080 color change in our 258 00:11:34,080 --> 00:11:36,520 hover selector here, 259 00:11:36,520 --> 00:11:39,430 and let's comment back in the transform property, 260 00:11:39,430 --> 00:11:41,730 and, but now going back to the project, 261 00:11:41,730 --> 00:11:44,763 you see that everything is as intended again. 262 00:11:45,760 --> 00:11:48,280 What you could do now though is 263 00:11:48,280 --> 00:11:50,660 you could add the same logic 264 00:11:50,660 --> 00:11:53,150 we just had for the entire card. 265 00:11:53,150 --> 00:11:55,200 So changing the background color 266 00:11:55,200 --> 00:11:57,189 to our button here. 267 00:11:57,189 --> 00:11:59,990 It's just a very small exercise, 268 00:11:59,990 --> 00:12:01,940 but with that, you can quickly practice 269 00:12:01,940 --> 00:12:04,040 how does transition logic works, 270 00:12:04,040 --> 00:12:07,030 therefore now is your chance to pause the video 271 00:12:07,030 --> 00:12:09,170 and to quickly implement this logic. 272 00:12:09,170 --> 00:12:11,410 So make sure that the color change here 273 00:12:11,410 --> 00:12:13,960 is a smooth process, not this direct 274 00:12:13,960 --> 00:12:16,423 color change that we have at the moment. 275 00:12:18,720 --> 00:12:22,140 So how did it go? Could you solve this little task? 276 00:12:22,140 --> 00:12:23,100 I hope you could. 277 00:12:23,100 --> 00:12:25,770 Let's quickly implement this on our own now. 278 00:12:25,770 --> 00:12:27,400 So let's go back 279 00:12:27,400 --> 00:12:29,390 and here was one little trap, 280 00:12:29,390 --> 00:12:32,450 which you hopefully didn't fall into. 281 00:12:32,450 --> 00:12:34,630 I hope you didn't add the transition property 282 00:12:34,630 --> 00:12:38,570 here below our card container class selector, 283 00:12:38,570 --> 00:12:41,350 because if you would add something like transition 284 00:12:41,350 --> 00:12:42,740 and then whatever here 285 00:12:42,740 --> 00:12:46,710 then, well, the cascading logic of CSS would, 286 00:12:46,710 --> 00:12:48,420 well, kick in. And with that, 287 00:12:48,420 --> 00:12:50,730 you would override your transformed 288 00:12:50,730 --> 00:12:52,120 property up here. 289 00:12:52,120 --> 00:12:54,660 So if you would add the background color property 290 00:12:56,120 --> 00:12:58,360 like this, and then zero to five seconds, 291 00:12:58,360 --> 00:13:00,460 for example, and ease out, 292 00:13:00,460 --> 00:13:02,883 like we had it for the transformation. 293 00:13:03,860 --> 00:13:06,130 Then by going back to the project 294 00:13:06,130 --> 00:13:08,000 and by hovering over the card, 295 00:13:08,000 --> 00:13:10,800 well, then the transition is gone. 296 00:13:10,800 --> 00:13:13,210 So if this happened to you, be careful, 297 00:13:13,210 --> 00:13:15,980 don't forget about the CSS principles 298 00:13:15,980 --> 00:13:18,380 we learn about in this course so far, 299 00:13:18,380 --> 00:13:21,470 so let's go back again to the code 300 00:13:21,470 --> 00:13:25,096 and let's cut this newly created part out now. 301 00:13:25,096 --> 00:13:27,060 And now we can go down 302 00:13:28,230 --> 00:13:29,820 where to 303 00:13:29,820 --> 00:13:30,690 two hour 304 00:13:33,050 --> 00:13:35,310 button class, this one here, 305 00:13:35,310 --> 00:13:37,880 here, we have to define it, as I said, 306 00:13:37,880 --> 00:13:40,540 we have to define the transition property 307 00:13:40,540 --> 00:13:43,940 on the initial state of our element. 308 00:13:43,940 --> 00:13:46,570 So here, the transition property can be added. 309 00:13:46,570 --> 00:13:49,230 Now we refer to the background color property, 310 00:13:49,230 --> 00:13:50,660 which we use here 311 00:13:51,630 --> 00:13:53,240 for the hover effect. 312 00:13:53,240 --> 00:13:55,970 And with this in place and by going back, 313 00:13:55,970 --> 00:13:57,660 you now see that we have the effect 314 00:13:57,660 --> 00:14:00,470 for the entire card container. 315 00:14:00,470 --> 00:14:03,840 And we also have it for our background color change 316 00:14:03,840 --> 00:14:04,893 of the button. 317 00:14:06,110 --> 00:14:08,120 So this was the little challenge, 318 00:14:08,120 --> 00:14:12,680 and this was it with transformations and transitions. 319 00:14:12,680 --> 00:14:15,330 As I said, these are the basics to make sure 320 00:14:15,330 --> 00:14:18,990 you can use these concepts as part of creating 321 00:14:18,990 --> 00:14:22,000 your layout, your look of the website, 322 00:14:22,000 --> 00:14:23,970 therefore attached to this lecture 323 00:14:23,970 --> 00:14:27,370 You can find more information about these topics 324 00:14:27,370 --> 00:14:30,920 because we will dive into the logic behind 325 00:14:30,920 --> 00:14:32,953 these little icons here now.