1
00:00:00,730 --> 00:00:02,470
Hello, everyone, and welcome back.

2
00:00:02,940 --> 00:00:06,520
In today's video, we will learn about the animation properties.

3
00:00:06,910 --> 00:00:12,640
These animation properties can be used to animate, many see as properties such as color, background,

4
00:00:12,640 --> 00:00:16,120
color, word, hide, border, radius, et, etc..

5
00:00:17,170 --> 00:00:23,470
Each animation needs to be defined with the gilfry mood, which is then called with the animation property.

6
00:00:24,010 --> 00:00:29,750
And each key frame rule defines what should happen at a specific moment during the animation, where

7
00:00:29,800 --> 00:00:33,580
zero percent is the beginning of the animation and hundred percent is the end.

8
00:00:34,300 --> 00:00:40,360
Let's learn more about these animation properties with examples to understand them better, saying we

9
00:00:40,360 --> 00:00:41,060
have this d'Hiv.

10
00:00:41,620 --> 00:00:46,480
And we want to change its color from blue to Google with the duration of two seconds.

11
00:00:47,170 --> 00:00:50,170
So first, we need to define the keyframe rule for this.

12
00:00:50,590 --> 00:00:51,810
Let's bring about Chordata.

13
00:00:52,510 --> 00:00:54,190
So let's bring it up here.

14
00:00:55,000 --> 00:00:55,960
Let's expand it a bit.

15
00:00:57,280 --> 00:01:05,830
So going to the sea as this file does inducts to define keyframe rules is at the rate keyframes and

16
00:01:05,860 --> 00:01:07,620
we need to give a name to this keyframe.

17
00:01:07,790 --> 00:01:10,000
So let's say Follett's.

18
00:01:11,560 --> 00:01:13,240
Then curly brackets.

19
00:01:13,810 --> 00:01:16,510
And now we're defining different stages of animation.

20
00:01:17,230 --> 00:01:19,390
So let's as you look, listen to this.

21
00:01:20,650 --> 00:01:26,260
Represents the starting state of the animation, and inside these Goehring brackets redefined Seress

22
00:01:26,370 --> 00:01:27,080
properties.

23
00:01:28,080 --> 00:01:34,500
So what we want to do is we want to start the animation with background color blue.

24
00:01:36,090 --> 00:01:36,630
Light blue.

25
00:01:37,110 --> 00:01:38,460
And we want to end it with.

26
00:01:40,980 --> 00:01:41,740
Light, cool.

27
00:01:41,860 --> 00:01:46,240
So a hundred person background, color like cool.

28
00:01:47,180 --> 00:01:50,650
So one hundred percent represents the end of the animation.

29
00:01:50,980 --> 00:01:54,750
Now we have a keyframe rules really so to animate.

30
00:01:54,970 --> 00:01:57,160
We need to use the animation name property.

31
00:01:57,670 --> 00:02:01,930
So coming up to the desk, let's use that property animation NE.

32
00:02:03,020 --> 00:02:05,410
And let's give this guy free money.

33
00:02:05,510 --> 00:02:09,740
So please, let's save it, then we need to define the duration.

34
00:02:10,220 --> 00:02:12,680
So let's say two seconds.

35
00:02:13,530 --> 00:02:16,790
So animation duration, two seconds.

36
00:02:16,880 --> 00:02:17,500
Let's save it.

37
00:02:18,890 --> 00:02:19,910
Now, as you can see.

38
00:02:21,720 --> 00:02:24,860
The animation starts from blue and goes to light guden.

39
00:02:25,290 --> 00:02:27,460
So when we define animation duration.

40
00:02:27,900 --> 00:02:31,200
So we are setting the time for one cycle of the animation.

41
00:02:31,620 --> 00:02:34,020
Then we need to define the number of times.

42
00:02:34,050 --> 00:02:38,040
This animation should run or the number of times the cycle should run.

43
00:02:38,670 --> 00:02:43,830
So for that we have another property animation iteration count.

44
00:02:43,860 --> 00:02:46,140
Let's say we want this to run three times.

45
00:02:46,560 --> 00:02:54,870
Let's say that, as you can see, it came from Mutu guru Lutu, Google and YouTube, Google Ungreen

46
00:02:54,870 --> 00:02:57,140
back to the original Ghaleb, which was white.

47
00:02:57,540 --> 00:03:02,550
Similarly, if we want this to keep repeating over and over so we could simply write infinite.

48
00:03:03,330 --> 00:03:04,100
So let's say red.

49
00:03:09,340 --> 00:03:13,510
On, as you can see, our animation is going over and over.

50
00:03:14,320 --> 00:03:19,480
But if you notice, after every cycle, the animation is reset to zero percent.

51
00:03:20,110 --> 00:03:26,160
Now, say we wanted to go from zero to hundred and then back Tromsø under two zero.

52
00:03:26,740 --> 00:03:33,640
So basically to go from blue to cool and then from cool to blue for this purpose, we can use another

53
00:03:33,640 --> 00:03:35,630
property called animation direction.

54
00:03:35,920 --> 00:03:36,780
So let's use that.

55
00:03:38,230 --> 00:03:39,830
So animation direction.

56
00:03:42,400 --> 00:03:48,520
So for this going from zero to hundred and from hundred back to zero, we can give it the rally ultimate,

57
00:03:49,150 --> 00:03:49,810
let's say that.

58
00:03:51,090 --> 00:03:55,680
And as you can see, our animation is going from blue to coral.

59
00:03:56,010 --> 00:03:57,910
And then some coral to blue.

60
00:03:58,500 --> 00:04:00,960
And again, from the coral and so on.

61
00:04:04,640 --> 00:04:08,440
It also accepts the value viewers with this value.

62
00:04:08,540 --> 00:04:10,680
It starts from hundred and goes to zero.

63
00:04:11,170 --> 00:04:13,430
And Aghan starts 100 and goes to zero.

64
00:04:14,030 --> 00:04:16,790
So basically it runs reverse from the normal flu.

65
00:04:17,880 --> 00:04:19,370
So let's try again in this value.

66
00:04:20,970 --> 00:04:21,670
Let's save it.

67
00:04:25,120 --> 00:04:27,770
And as you can see, it's going from cool to blue.

68
00:04:28,300 --> 00:04:34,930
And then again, from Google to blue, we can also control the animation speed using the property animation,

69
00:04:34,930 --> 00:04:35,950
timing function.

70
00:04:36,310 --> 00:04:37,430
So let's give that a try.

71
00:04:38,700 --> 00:04:45,810
So animation timing function on this property, it except is in is out.

72
00:04:46,100 --> 00:04:47,920
Lee New is in, out.

73
00:04:48,420 --> 00:04:50,470
So let's say he's in.

74
00:04:50,610 --> 00:04:53,940
So we wanted to start slowly and then go faster.

75
00:04:56,480 --> 00:05:01,640
All right, now let's remove these things and let's make our animation run just one time.

76
00:05:03,060 --> 00:05:05,970
So let's remove these.

77
00:05:06,210 --> 00:05:07,620
Let's bring this to one.

78
00:05:07,680 --> 00:05:08,320
Let's save it.

79
00:05:12,710 --> 00:05:18,220
And now, as you can see, our animation are from Blue, went to Cordel and came back to original state,

80
00:05:18,250 --> 00:05:19,410
which is white.

81
00:05:19,990 --> 00:05:20,980
No background color.

82
00:05:21,520 --> 00:05:24,730
Let's say we wanted to stay in the last state of the animation.

83
00:05:25,120 --> 00:05:28,040
For that, we have another property called animation film mode.

84
00:05:28,570 --> 00:05:29,800
So let's give that a try.

85
00:05:30,370 --> 00:05:32,040
So animation film mode.

86
00:05:32,650 --> 00:05:34,190
Let's say forwards.

87
00:05:34,450 --> 00:05:35,100
Save David.

88
00:05:36,280 --> 00:05:43,390
And now, as you can see, when the animation got over, it stayed in the last stage of the animation,

89
00:05:43,510 --> 00:05:45,400
so it stayed at 100 percent.

90
00:05:46,600 --> 00:05:52,540
Let's say you want to pause the animation from someone who was on the element for this, we can use

91
00:05:52,540 --> 00:05:55,750
another property called animation, please state.

92
00:05:56,260 --> 00:05:58,410
It accepts to use play and pause.

93
00:05:58,870 --> 00:05:59,940
So let's give that a try.

94
00:06:00,580 --> 00:06:02,770
But before that, let's increase the duration.

95
00:06:03,010 --> 00:06:04,090
So five seconds.

96
00:06:04,600 --> 00:06:05,200
Let's say that.

97
00:06:08,390 --> 00:06:11,880
All right, so what we want is when someone who was under Dave.

98
00:06:12,300 --> 00:06:14,880
So Dave and Hoeber.

99
00:06:15,560 --> 00:06:18,170
So we want to pause the animation state.

100
00:06:18,480 --> 00:06:21,300
So let's use that property animation, please.

101
00:06:21,300 --> 00:06:21,640
State.

102
00:06:21,690 --> 00:06:24,390
Let's go with the rally was let's say that.

103
00:06:28,400 --> 00:06:29,720
Let's make this finite.

104
00:06:29,960 --> 00:06:30,980
Let's save it.

105
00:06:31,870 --> 00:06:32,150
All right.

106
00:06:33,050 --> 00:06:35,730
So when I Hovell my animation stopped.

107
00:06:35,840 --> 00:06:36,550
It was.

108
00:06:36,860 --> 00:06:38,190
It's not moving any further.

109
00:06:39,150 --> 00:06:39,690
Remove it.

110
00:06:41,050 --> 00:06:41,640
Who were gone?

111
00:06:41,830 --> 00:06:42,550
It Boggs's.

112
00:06:44,470 --> 00:06:47,950
And as you can see, it went to Google and now I'm hovering.

113
00:06:47,980 --> 00:06:49,960
So, again, the animation is just.

114
00:06:55,670 --> 00:06:56,020
All right.

115
00:06:56,640 --> 00:07:02,970
Similarly, let's say, along with the background color change, we want our element to rotate along

116
00:07:02,970 --> 00:07:03,960
the Z axis.

117
00:07:04,470 --> 00:07:08,430
So let's choose above or transform your date, Z.

118
00:07:10,020 --> 00:07:17,100
Let's say it starts from zero degrees and it goes to 45 degrees.

119
00:07:18,760 --> 00:07:21,310
Or let's say 180 degrees.

120
00:07:22,400 --> 00:07:23,030
That's even.

121
00:07:28,250 --> 00:07:33,500
And as you can see now, our element, digital duty along the Z axis.

122
00:07:34,520 --> 00:07:39,410
So when I hold the animation stops and when I remove its resume's.

123
00:07:42,830 --> 00:07:48,820
And that's how your animation plays state property works even for these animation properties.

124
00:07:49,150 --> 00:07:51,520
We have a shorthand to decode animation.

125
00:07:52,090 --> 00:07:54,440
It accepts the values and followed sequence.

126
00:07:57,710 --> 00:07:59,720
Let's try using one shorthand of a deep.

127
00:08:00,240 --> 00:08:02,390
So let's say animation.

128
00:08:03,080 --> 00:08:04,900
So the first one is name.

129
00:08:05,240 --> 00:08:08,510
So in our case, the name is Bolls Space.

130
00:08:09,470 --> 00:08:11,600
Then we need to give the animation duration.

131
00:08:11,630 --> 00:08:16,400
So in our case, which is five seconds, then we need to give the timing function.

132
00:08:17,120 --> 00:08:18,320
Let's say is in.

133
00:08:19,350 --> 00:08:22,440
Then we have to give the hydration count.

134
00:08:22,920 --> 00:08:24,060
According to the sequence.

135
00:08:24,090 --> 00:08:26,110
So let's just say infinite.

136
00:08:27,060 --> 00:08:28,290
Let's common these.

137
00:08:29,350 --> 00:08:30,060
Let's say that.

138
00:08:31,490 --> 00:08:35,140
And as you can see, our animation is working as expected.

139
00:08:38,170 --> 00:08:39,310
That's all for today, guys.

140
00:08:39,370 --> 00:08:41,590
If there is something that you did not understand.

141
00:08:41,620 --> 00:08:44,170
Feel free to drop a comment and we will discuss it.

142
00:08:45,070 --> 00:08:46,130
See you in the next video.

143
00:08:46,330 --> 00:08:46,690
Bye.

144
00:08:46,830 --> 00:08:47,490
And take care.