1
00:00:01,320 --> 00:00:05,940
Who finally offers first animation, so what is actually excess animation?

2
00:00:05,970 --> 00:00:13,440
Well, it is a model of success that lets you animate values of those properties over time.

3
00:00:13,770 --> 00:00:16,630
Very important Cyesis properties over time.

4
00:00:16,980 --> 00:00:18,170
How do we do this?

5
00:00:18,420 --> 00:00:20,970
Well, by using the keyframe rule.

6
00:00:22,770 --> 00:00:33,020
Now, let us let's jump in a suspect again, a stabbing here at Keyframe and what this rule actually

7
00:00:33,120 --> 00:00:37,620
actually is, it is a specification of an animation code.

8
00:00:37,950 --> 00:00:42,240
So with this rule, you can specify animation code.

9
00:00:42,540 --> 00:00:48,780
The animation is created by gradually changing from one set of CSI style to another, the constantly

10
00:00:48,780 --> 00:00:55,410
changing form, let's say, from the capacity of zero to the one, and we can increment the different

11
00:00:55,410 --> 00:00:55,780
changes.

12
00:00:55,780 --> 00:00:58,580
So we would go to one phase in the next phase.

13
00:00:58,590 --> 00:01:01,280
It will have, for example, opacity five and so forth and so on.

14
00:01:01,290 --> 00:01:03,120
But enough with that.

15
00:01:03,450 --> 00:01:05,430
I'm going to show you exactly how this works.

16
00:01:05,430 --> 00:01:10,110
But during the animation, you can change the set of scissors rules many times.

17
00:01:10,470 --> 00:01:13,560
So they're not keyframe, not very important.

18
00:01:13,980 --> 00:01:23,160
Specify when the style changes will happen in percentages or with the key cues from and to so the jury

19
00:01:23,650 --> 00:01:30,180
will go with zero zero zero percent and then something happens.

20
00:01:30,180 --> 00:01:31,860
Code here.

21
00:01:33,650 --> 00:01:36,560
To also do something like this.

22
00:01:40,610 --> 00:01:50,120
To also complete this and 100 percent now could have also different instrumentations between them,

23
00:01:50,480 --> 00:01:52,820
sort of say you can have your 50 percent.

24
00:01:54,330 --> 00:01:56,760
And something should happen cold

25
00:01:59,550 --> 00:02:02,380
or you could also hate that type 59.

26
00:02:02,790 --> 00:02:12,690
You could also 59 as no one, but you could also do something like call them here and from.

27
00:02:15,230 --> 00:02:15,950
And to.

28
00:02:21,250 --> 00:02:22,270
We don't need this anymore.

29
00:02:23,160 --> 00:02:23,470
OK?

30
00:02:24,490 --> 00:02:27,160
So let's start creating our first animation.

31
00:02:27,940 --> 00:02:32,280
Let's start with this opacity just told you about.

32
00:02:32,290 --> 00:02:38,540
So like going off zero percent, I'm going to type in here opacity zero.

33
00:02:38,680 --> 00:02:47,140
What this basically means is when the animation starts at zero, the opacity will be zero, a example.

34
00:02:47,140 --> 00:02:50,340
And coincidentally, it is zero and zero.

35
00:02:50,470 --> 00:02:53,680
But we also want a transform.

36
00:03:01,950 --> 00:03:02,370
Oh, yeah.

37
00:03:03,540 --> 00:03:06,270
I was wondering, why do I have the squiggly lines?

38
00:03:06,760 --> 00:03:10,190
What the hell's the error at Keyframe needs to have a name.

39
00:03:10,210 --> 00:03:15,280
So let's get this the name of animation name section.

40
00:03:16,720 --> 00:03:20,460
But name and baby name.

41
00:03:20,530 --> 00:03:25,150
Well, there's something off with my typing today, really, really sorry.

42
00:03:25,360 --> 00:03:28,960
So name and we don't get this thought right here.

43
00:03:30,100 --> 00:03:33,420
A scripted lines should disappear.

44
00:03:34,690 --> 00:03:36,610
I still has good lines.

45
00:03:38,450 --> 00:03:44,270
What is the error, where's the error to transport what so transform?

46
00:03:46,820 --> 00:03:53,150
And we want a transformation, a translation, so we translate of minus one hundred pixels.

47
00:03:54,660 --> 00:03:57,990
So what does this mean, the element that we will target?

48
00:03:58,010 --> 00:04:00,770
We'll start out with the opacity of zero.

49
00:04:01,660 --> 00:04:05,350
And its position will be translated with minus 100 pixels.

50
00:04:06,960 --> 00:04:15,750
Now, at one hundred percent of the actually companies now stepping in at 100 percent, the capacity

51
00:04:16,230 --> 00:04:19,260
will be one, an animation which is 100 percent.

52
00:04:20,290 --> 00:04:29,890
And that and that we will transform it by translating it again on the x axis to its zero position.

53
00:04:30,490 --> 00:04:32,950
I'm going to leave this 50 percent open for now.

54
00:04:34,650 --> 00:04:42,620
So it's all pretty and done, but that's not enough, we need to include this keyframe somewhere, not

55
00:04:42,630 --> 00:04:43,320
the way we do this.

56
00:04:43,320 --> 00:04:44,610
Let's target our H1.

57
00:04:46,060 --> 00:04:48,970
Is by using the animation keyword.

58
00:04:50,990 --> 00:04:53,390
As soon as I use enervation keyword, it?

59
00:04:53,390 --> 00:04:55,210
S not exis.

60
00:04:56,690 --> 00:05:04,690
We need to type it in here, the animation name so that the key thing that we created up here.

61
00:05:05,120 --> 00:05:06,900
So let's take this animation name.

62
00:05:08,630 --> 00:05:12,010
That's why I gave it also the animation name as a name.

63
00:05:13,670 --> 00:05:22,050
And that any animation needs to have a duration, so animation duration of, let's say, five seconds.

64
00:05:22,670 --> 00:05:25,250
So this animation right here, this keyframe.

65
00:05:26,220 --> 00:05:30,840
Which is included in an animation would take five seconds to execute.

66
00:05:32,890 --> 00:05:39,300
A couple of things I wanted to one, as you would imagine, from the top of the rim.

67
00:05:40,720 --> 00:05:42,880
And so saying, Chris, it's font size.

68
00:05:43,990 --> 00:05:45,550
The fine print.

69
00:05:46,580 --> 00:05:51,700
OK, so you ready to take a look at how this looks as go here and let's refresh it again.

70
00:05:52,630 --> 00:05:55,920
This is going to come from it's minus one, her position.

71
00:05:57,120 --> 00:06:06,720
And take five seconds and go from to zero with minus one, minus 100 to positive one and it's position

72
00:06:06,720 --> 00:06:07,020
zero.

73
00:06:07,020 --> 00:06:08,940
So let's try this again and again.

74
00:06:08,990 --> 00:06:15,000
I don't have a clock to show this actually seconds, but I could reduce this to one second.

75
00:06:15,360 --> 00:06:16,080
It's safe.

76
00:06:16,560 --> 00:06:21,770
And let's refresh again back one second, because it's much quicker now.

77
00:06:21,800 --> 00:06:25,170
We also have animation delay as a rule.

78
00:06:25,220 --> 00:06:26,820
So animation.

79
00:06:29,510 --> 00:06:39,140
DeLay, which would just delay the start of the animation that use three seconds, Kayla said save let's

80
00:06:39,140 --> 00:06:40,100
refresh this.

81
00:06:40,550 --> 00:06:43,750
One, two, three, go.

82
00:06:44,570 --> 00:06:45,040
Perfect.

83
00:06:46,790 --> 00:06:48,380
OK, let's do another animation.

84
00:06:48,380 --> 00:06:52,400
Let's take let's take a P or paragraph that here.

85
00:06:53,700 --> 00:07:00,630
So let's go paragraph tech and let's increase this font size was too small for me.

86
00:07:01,630 --> 00:07:05,020
Let's give the Trickster's form to uppercase.

87
00:07:06,860 --> 00:07:11,330
Now for this paragraph, they don't want to show you very quickly the short time we are going to learn

88
00:07:11,330 --> 00:07:14,330
about the short and the run of the section.

89
00:07:14,810 --> 00:07:22,200
But I just want to show you what how this will look at the end so we can do it and make sure we will

90
00:07:22,240 --> 00:07:25,160
indeed use the same keyframe as we did up here.

91
00:07:25,700 --> 00:07:31,230
But this time I could also include a translator.

92
00:07:32,660 --> 00:07:33,970
Now, let me do something else.

93
00:07:34,800 --> 00:07:42,710
I'm going to compare the keyframe actually in the cockpit down here, rename it animation name to.

94
00:07:44,990 --> 00:07:53,740
Could have the same thing here, but for this for the 50 percent, I'm going to transform it, 80 pixels.

95
00:07:57,730 --> 00:07:58,750
Translate.

96
00:08:00,500 --> 00:08:02,390
On the Y axis, 80 pixels.

97
00:08:05,370 --> 00:08:09,810
OK, now within here, we're going to type in animation.

98
00:08:12,110 --> 00:08:15,660
And I'm going to use the name of the key friend that we just created.

99
00:08:16,520 --> 00:08:18,800
So the second one animation name to.

100
00:08:20,200 --> 00:08:26,260
And now after this, and it is going to take five seconds, is going to go backwards and it's going

101
00:08:26,260 --> 00:08:33,550
to alternate and I also want to give it a delay, delay of two seconds.

102
00:08:34,300 --> 00:08:39,610
So let's see how this works because they saw as was alternating.

103
00:08:42,700 --> 00:08:45,010
The animation will be delayed two seconds.

104
00:08:45,040 --> 00:08:53,590
It's going to start at zero with zero capacity and with a minus 100 pixels and it 50 percent is going

105
00:08:53,590 --> 00:09:04,990
to go down, actually up is going to go up 80 pixels and then is going to go slowly to 100 to the capacity

106
00:09:04,990 --> 00:09:09,460
of one, which is 100 percent and transform to its initial position.

107
00:09:09,910 --> 00:09:11,290
So that's refresh again.

108
00:09:12,390 --> 00:09:18,690
DeLay to a second, and it's coming in is going down that it's going up its initial position and there

109
00:09:18,690 --> 00:09:19,890
we go, there's an animation.

110
00:09:19,930 --> 00:09:22,640
OK, so next up, we're going to do another color scene.

111
00:09:22,650 --> 00:09:23,160
The next one.

112
00:09:23,210 --> 00:09:23,430
Bye.