1
00:00:00,840 --> 00:00:02,820
Hello, everyone, and welcome back.

2
00:00:03,240 --> 00:00:07,260
In today's video, we will learn how to create this flying rocket animation.

3
00:00:07,880 --> 00:00:11,620
So when I refresh this page, my rocket, it flies up.

4
00:00:12,870 --> 00:00:18,300
Let's see if we have this over page with a rocket image and a background.

5
00:00:19,050 --> 00:00:21,450
First, let's move this rocket to the bottom center.

6
00:00:21,960 --> 00:00:23,460
Let's bring about good Ed.

7
00:00:24,450 --> 00:00:25,830
Let's reduce it a bit.

8
00:00:26,980 --> 00:00:30,790
So coming to the stylus file, let's give it position absolute.

9
00:00:34,220 --> 00:00:38,270
Let's bring it at the bottom, so let's see bottom 20 phobic suits.

10
00:00:39,770 --> 00:00:41,150
Let's bring it in the center.

11
00:00:41,270 --> 00:00:43,940
So left 50 percent.

12
00:00:46,920 --> 00:00:54,570
And then translated in the left direction by minus 50 blows in a log with so transformed.

13
00:00:55,350 --> 00:00:58,350
Translate X minus 50 percent.

14
00:00:59,250 --> 00:00:59,970
Let's save it.

15
00:01:00,550 --> 00:01:04,620
And now as you can see, our rocket is in the bottom center of the screen.

16
00:01:05,400 --> 00:01:08,820
Now, what we want is this rocket to go up.

17
00:01:09,970 --> 00:01:11,140
So coming back, you.

18
00:01:13,150 --> 00:01:14,760
First, let's create a defreeze.

19
00:01:15,370 --> 00:01:17,600
So keyframe, let's call it fly.

20
00:01:19,760 --> 00:01:23,330
So on zero percent, let's say, transform.

21
00:01:25,110 --> 00:01:25,470
Funds.

22
00:01:25,850 --> 00:01:30,930
So X, C minus 50 percent and Y zero.

23
00:01:31,490 --> 00:01:32,930
But on hundred percent.

24
00:01:34,450 --> 00:01:37,810
I want to change these values, so transform.

25
00:01:38,230 --> 00:01:38,980
Translate.

26
00:01:39,880 --> 00:01:48,660
Minus 50 percent, because I've used this property to center our rocket and then we're giving it transform.

27
00:01:48,730 --> 00:01:49,000
Why?

28
00:01:49,090 --> 00:01:50,830
Because we wanted to go above.

29
00:01:50,860 --> 00:01:51,650
So let's say one hundred.

30
00:01:51,650 --> 00:01:52,380
You bought hype.

31
00:01:52,840 --> 00:01:54,580
So there it goes out of the screen.

32
00:01:55,090 --> 00:01:55,670
Let's save it.

33
00:01:56,020 --> 00:02:00,990
Now, to use this animation, we could use the short term property animation.

34
00:02:01,000 --> 00:02:04,240
Let's give it the keyframe name, which is fly.

35
00:02:04,810 --> 00:02:07,720
Let's give it a duration, say, five seconds.

36
00:02:08,410 --> 00:02:09,220
Let's save it.

37
00:02:11,000 --> 00:02:11,290
OK.

38
00:02:11,390 --> 00:02:12,530
It's going down.

39
00:02:13,640 --> 00:02:16,120
We'll have to give it a negative value, so let's save it.

40
00:02:17,380 --> 00:02:19,330
And as you can see, a plane.

41
00:02:19,360 --> 00:02:20,280
It went up.

42
00:02:23,110 --> 00:02:26,170
Let's say it starts slow and goes fast.

43
00:02:26,890 --> 00:02:28,170
So is in the.

44
00:02:29,140 --> 00:02:33,490
And as you can see, it starts slow, but it moves faster towards the end.

45
00:02:34,270 --> 00:02:35,620
Let's refresh it once more.

46
00:02:36,140 --> 00:02:40,060
And as you can see, upline is going up, up and away.

47
00:02:41,020 --> 00:02:42,130
That's all for today, guys.

48
00:02:42,220 --> 00:02:44,650
If there is something that you did not understand.

49
00:02:44,770 --> 00:02:47,560
Feel free to drop a comment and we will discuss it.

50
00:02:48,250 --> 00:02:49,300
See you in the next video.

51
00:02:49,450 --> 00:02:49,780
Bye.

52
00:02:49,920 --> 00:02:50,560
And take care.