1 00:00:00,600 --> 00:00:06,570 So our last subject is now the shorthand, the transition shorthand, and basically what this means 2 00:00:06,570 --> 00:00:12,890 is what we're going to cram in each and every functionality of our transition into one line. 3 00:00:13,290 --> 00:00:20,670 And this would look lousy, something like this, because if you have a scaling, a rotation and a color 4 00:00:20,670 --> 00:00:21,500 transformation. 5 00:00:21,840 --> 00:00:23,790 So let me show you how this works. 6 00:00:25,690 --> 00:00:35,050 First of all, let me target the div with the class typing class first with a class of shorthand. 7 00:00:41,970 --> 00:00:52,560 Along with the changes, with the 150 pixels, and it's hard to also 150 pixels and a security background 8 00:00:52,560 --> 00:00:56,210 color of dark. 9 00:00:57,300 --> 00:00:57,640 Yeah. 10 00:00:58,440 --> 00:00:58,950 Oh, sure. 11 00:00:58,950 --> 00:01:00,430 Change to something else. 12 00:01:00,450 --> 00:01:01,690 Let's go with this. 13 00:01:01,710 --> 00:01:02,640 Just step in brown. 14 00:01:04,160 --> 00:01:04,780 There we go. 15 00:01:06,280 --> 00:01:11,740 Like, you know, our transition, basically something like this transition. 16 00:01:14,970 --> 00:01:20,970 I keep forgetting the end transition, then comes a property. 17 00:01:22,500 --> 00:01:31,950 So Trump then comes the duration of the property there, Dan, comma comes the timing function. 18 00:01:33,880 --> 00:01:43,000 Which is easy, the easy is out funk, not funk, funk, and then comes the delay. 19 00:01:44,710 --> 00:01:49,510 OK, so this is basically how a transition actually looks now. 20 00:01:49,510 --> 00:01:55,930 We could do something like transition the way it should take. 21 00:01:56,110 --> 00:02:00,090 So the property should take up two seconds. 22 00:02:00,100 --> 00:02:01,780 I actually have to go with four seconds. 23 00:02:02,530 --> 00:02:03,370 Four seconds. 24 00:02:03,760 --> 00:02:06,190 The height transition. 25 00:02:09,260 --> 00:02:10,550 Take up two seconds. 26 00:02:12,410 --> 00:02:21,590 And scroll up a bit, the background color should take up two seconds. 27 00:02:24,370 --> 00:02:26,470 The transformations of trans. 28 00:02:28,800 --> 00:02:32,280 Transform should take up also two seconds. 29 00:02:33,700 --> 00:02:38,470 And it should go with the easy out function duration. 30 00:02:39,800 --> 00:02:44,150 A timely function, and it should have a delay of two seconds. 31 00:02:45,330 --> 00:02:48,650 OK, so let's take our short hand, Dave, again. 32 00:02:52,720 --> 00:02:54,070 That's Hollywood. 33 00:02:57,660 --> 00:03:05,910 And let's start with wit, and they should go to Freelander pixels, then height, it should go to 400 34 00:03:05,910 --> 00:03:06,450 pixels. 35 00:03:09,170 --> 00:03:24,500 And because then the background color should turn red and you want to do here is a rotation, so let's 36 00:03:24,500 --> 00:03:30,680 rotate, transform, rotate and let's rotated 180 degrees. 37 00:03:32,160 --> 00:03:36,210 So let's take a look how this works, actually, to go here. 38 00:03:40,100 --> 00:03:41,180 So let me holler with. 39 00:03:42,760 --> 00:03:50,290 They should go down here, is going to change his background, colors, going to rotate, and it is 40 00:03:50,290 --> 00:03:51,880 also going to scale. 41 00:03:53,800 --> 00:03:57,910 Now, we could also do something like sort of hover active. 42 00:04:02,130 --> 00:04:09,300 And what this actually does is this takes effect only when I hold a click and hold on this. 43 00:04:12,740 --> 00:04:17,410 Sydney Sustainers, if you'll only click on it, then to do the back. 44 00:04:18,320 --> 00:04:25,430 So as soon as I click and hold on the element, the transition is executed and as soon as I let go of 45 00:04:25,430 --> 00:04:28,040 it, it goes back. 46 00:04:28,640 --> 00:04:30,950 We could also do something like Target. 47 00:04:43,040 --> 00:04:49,630 OK, so that's pretty much it about the short and also and about transition so soon, the next one by.