1 00:00:00,790 --> 00:00:06,880 OK, some next are beginning to learn about the animation, film property, and this will just specify 2 00:00:06,880 --> 00:00:11,340 a style for the target element when the animation is not playing. 3 00:00:11,500 --> 00:00:13,240 So it's before. 4 00:00:14,530 --> 00:00:21,520 It starts after it starts or both of them get so let's see how this looks and stuff in your comment 5 00:00:22,510 --> 00:00:29,340 animation film mode and let's go underneath your comment. 6 00:00:30,310 --> 00:00:34,540 So let's grab our d'Hiv with the animation. 7 00:00:35,790 --> 00:00:38,040 And they should be on top of this right now. 8 00:00:42,910 --> 00:00:54,940 Animation and field mode, so let's start, first of all, our cube there again with one hundred pixels, 9 00:00:55,690 --> 00:00:57,530 right one. 10 00:00:57,670 --> 00:00:58,360 Let's go it. 11 00:00:58,360 --> 00:00:59,320 Two hundred pixels. 12 00:00:59,320 --> 00:01:01,980 Why am I still going at 100? 13 00:01:02,230 --> 00:01:03,050 Let's mix it up. 14 00:01:04,920 --> 00:01:11,610 OK, and let's go with the background color red and position it. 15 00:01:12,830 --> 00:01:13,520 Relative. 16 00:01:14,100 --> 00:01:19,910 OK, now I'm going to create, let's see, one, two, three, four. 17 00:01:21,600 --> 00:01:31,680 Actually, three different keyframes, so let's go up here and the first one will be four forwards because 18 00:01:31,680 --> 00:01:35,800 the animation film mode has actually free properties. 19 00:01:36,060 --> 00:01:42,480 Well, first of all, none, which is not property, but it's there, which is the default value then 20 00:01:42,480 --> 00:01:44,230 forwards, backwards and both. 21 00:01:44,400 --> 00:01:52,980 So let's create a keyframe for each of them, which free of them that is so keyframe and we call this 22 00:01:52,980 --> 00:01:53,460 forward. 23 00:01:55,810 --> 00:01:56,730 So do any. 24 00:01:57,280 --> 00:02:00,700 Yeah, and me forward. 25 00:02:03,460 --> 00:02:04,150 Forwards. 26 00:02:05,170 --> 00:02:11,110 OK, so this would be the key frame for the forwards type of animation film mode, and for this we're 27 00:02:11,110 --> 00:02:12,400 going to go from. 28 00:02:13,610 --> 00:02:17,360 So not for him, not like next time top. 29 00:02:19,010 --> 00:02:20,090 And zero. 30 00:02:21,140 --> 00:02:22,310 They're going to go. 31 00:02:23,420 --> 00:02:28,670 To top from the top to her big source. 32 00:02:29,590 --> 00:02:32,140 And we will also change your background color. 33 00:02:37,050 --> 00:02:38,940 Two green. 34 00:02:42,410 --> 00:02:46,790 Wait a second, something ain't right here, so close this one up. 35 00:02:47,960 --> 00:02:49,760 This one and this. 36 00:02:51,440 --> 00:03:00,620 OK, there's our first Kiffer, I'm going to copy this keyframe two more times, and this would be Packwood's. 37 00:03:04,250 --> 00:03:06,350 I'm going to change the color to yellow. 38 00:03:08,070 --> 00:03:13,990 It's basically the same information, only the kind of a change, but I need this changing of color. 39 00:03:14,450 --> 00:03:22,310 For us to see the difference and the last one, I'm going to get here a background color of blue and 40 00:03:22,310 --> 00:03:26,720 is going to go to, let's say, red, not purple. 41 00:03:28,220 --> 00:03:29,250 Purple. 42 00:03:32,060 --> 00:03:33,710 OK, and this would be both. 43 00:03:37,980 --> 00:03:42,120 Now, it's no different here, you're going to call any nation name. 44 00:03:43,830 --> 00:03:54,090 And the first one will be wait, and we name and the person is enemy forward, so this one right here. 45 00:03:55,750 --> 00:04:01,590 OK, let's put it in here and going to compress two more times and we play it backwards. 46 00:04:05,590 --> 00:04:06,280 And both. 47 00:04:08,340 --> 00:04:20,040 OK, and then the comment, the last two out now for the duration of the animation back in here, animation 48 00:04:20,460 --> 00:04:24,240 duration, I'm going to go with three seconds. 49 00:04:25,140 --> 00:04:27,270 So let's see how the animation looks. 50 00:04:28,170 --> 00:04:33,180 Philmont and we need this one direction curve. 51 00:04:33,180 --> 00:04:34,820 And down here we have a female. 52 00:04:35,910 --> 00:04:43,870 So let's hit refresh and we have our first one, which we didn't do anything because our first film 53 00:04:43,870 --> 00:04:50,490 mode will be animation, Helmuth, and none. 54 00:04:51,160 --> 00:04:53,820 OK, but this won't do anything. 55 00:04:53,820 --> 00:05:00,070 But the animation will not play any style to the animal before or after it's executed. 56 00:05:00,090 --> 00:05:01,980 So if you hit your refresh. 57 00:05:03,550 --> 00:05:05,170 OK, nothing special happens. 58 00:05:08,200 --> 00:05:13,720 But if I would do now a animation, forewords. 59 00:05:16,980 --> 00:05:24,860 Now, with this said, the element will retain the style values that is set by the Leskie friend. 60 00:05:26,080 --> 00:05:30,640 And it depends on the animation, direction and animation, the action count. 61 00:05:31,060 --> 00:05:34,570 Okay, so let's take a look at how this looks set to flash again. 62 00:05:35,990 --> 00:05:36,950 And there we go. 63 00:05:39,000 --> 00:05:46,380 Okay, now let's change the animation name coming to this one, I'll change it to backwards and also 64 00:05:46,380 --> 00:05:48,060 change the property hit backwards. 65 00:05:49,350 --> 00:05:49,940 To save. 66 00:05:53,840 --> 00:05:57,080 Just second, this one was exactly I should go to yellow. 67 00:05:58,310 --> 00:06:04,430 Yes, let's hit refresh again and there we go, and the last one was both. 68 00:06:09,300 --> 00:06:10,590 And let's hit refresh again. 69 00:06:12,070 --> 00:06:19,380 But I also need to change the animation, so coming this one out and this one and like. 70 00:06:20,590 --> 00:06:21,460 And we go. 71 00:06:22,390 --> 00:06:25,810 OK, so that's it for the animation film called.