1
00:00:00,500 --> 00:00:02,120
Hello, everyone, and welcome back.

2
00:00:03,200 --> 00:00:09,470
In today's video, we will learn about the transition properties in see assess these transition properties,

3
00:00:09,530 --> 00:00:16,160
allow elements to change values over a specified duration rather than having them occur immediately.

4
00:00:16,540 --> 00:00:20,950
Say, do you want to change the color of our death from blue to call when we hoeber?

5
00:00:21,260 --> 00:00:23,360
So right now in I home, nothing happens.

6
00:00:24,110 --> 00:00:25,300
So first, let's add that.

7
00:00:25,910 --> 00:00:27,080
Let's bring a barcoded.

8
00:00:27,680 --> 00:00:28,030
All right.

9
00:00:28,040 --> 00:00:31,590
So Dev on Huvelle.

10
00:00:32,720 --> 00:00:35,470
Let's change the background, color to light, Google.

11
00:00:36,350 --> 00:00:37,010
Let's save it.

12
00:00:37,900 --> 00:00:44,010
And now we're not over on the Element Duckula genius to Google instantaneously ceiling on this color

13
00:00:44,010 --> 00:00:46,940
to change from you to Google in one second.

14
00:00:47,420 --> 00:00:50,150
This could be achieved using their transition properties.

15
00:00:50,480 --> 00:00:51,680
So let's give it a try.

16
00:00:52,070 --> 00:00:56,840
First, we have to define for which property are we controlling the transition.

17
00:00:57,020 --> 00:00:58,580
So for that, we have a property.

18
00:01:00,100 --> 00:01:01,630
Transition property.

19
00:01:02,470 --> 00:01:04,180
So we want to change the background, Dillons.

20
00:01:04,290 --> 00:01:07,360
So that's why we love to give.

21
00:01:09,370 --> 00:01:10,880
By Goncalo over here.

22
00:01:12,800 --> 00:01:16,570
All right, then we need to define the duration of the transition.

23
00:01:17,650 --> 00:01:22,040
So transition, duration, so let's say one second.

24
00:01:22,120 --> 00:01:24,190
You can also give the value in milliseconds.

25
00:01:25,730 --> 00:01:31,250
So either you can write it as one second or thousand milliseconds.

26
00:01:32,030 --> 00:01:32,600
Let's say that.

27
00:01:33,350 --> 00:01:34,520
Now when I huvelle.

28
00:01:36,910 --> 00:01:41,860
Slowly, it turns to light green and it turns back to blue.

29
00:01:46,510 --> 00:01:47,620
You see this difference.

30
00:01:49,720 --> 00:01:53,170
Let's increase this time, let's say, three seconds.

31
00:01:55,500 --> 00:01:56,780
And now when I hold on it.

32
00:01:58,390 --> 00:01:59,710
It slowly goes to Gurel.

33
00:02:00,340 --> 00:02:03,550
And when I remove the pointer, it comes back to blue.

34
00:02:04,480 --> 00:02:06,620
We can also control the animation speed.

35
00:02:07,120 --> 00:02:07,860
So save it.

36
00:02:07,870 --> 00:02:13,510
If you want to start the animation fast and end it slowly or save, you want to start it slowly and

37
00:02:13,570 --> 00:02:14,350
end it fast.

38
00:02:14,890 --> 00:02:18,400
For that, we have another property called transition time in function.

39
00:02:18,460 --> 00:02:19,380
So let's add that.

40
00:02:20,610 --> 00:02:21,790
So transition.

41
00:02:23,850 --> 00:02:24,800
Timing function.

42
00:02:25,990 --> 00:02:29,530
So this can accept multiple Lolly C E's in.

43
00:02:31,630 --> 00:02:35,880
So what Eason does is it starts slowly and ends fast.

44
00:02:37,360 --> 00:02:39,170
It accepts and the value is out.

45
00:02:39,710 --> 00:02:43,650
So what this does is it starts first and AIDS slowly.

46
00:02:44,300 --> 00:02:46,730
I'm sure he wouldn't be able to notice the difference right now.

47
00:02:47,030 --> 00:02:48,380
So let's add another div.

48
00:02:49,850 --> 00:02:51,170
Let's say Dave do.

49
00:02:52,820 --> 00:03:00,380
Let's say let's give this death to an I.D., let's say you do so coming back here.

50
00:03:02,360 --> 00:03:04,920
And for Dave, too, let's give it a different background color.

51
00:03:06,000 --> 00:03:06,920
Say this.

52
00:03:07,560 --> 00:03:08,260
Let's save it.

53
00:03:13,220 --> 00:03:16,120
And this is an idea so harsh.

54
00:03:16,920 --> 00:03:17,510
That's David.

55
00:03:18,740 --> 00:03:21,670
Now, as you can see, they've got to the from those with different color.

56
00:03:22,130 --> 00:03:22,470
OK.

57
00:03:23,300 --> 00:03:27,440
So for the first one, let's keep the stymying function as he's out.

58
00:03:28,110 --> 00:03:30,770
So the second one, let's keep it as is in.

59
00:03:31,880 --> 00:03:32,500
Let's say it.

60
00:03:36,170 --> 00:03:39,470
So when I see it, you should just try to notice this difference.

61
00:03:40,100 --> 00:03:43,860
So for the first one, we see the blue glow very quickly and then it slows down.

62
00:03:44,570 --> 00:03:47,600
But for the second, it starts slowly, but it ends faster.

63
00:03:48,560 --> 00:03:51,380
So that's the difference between easing and is out.

64
00:03:52,490 --> 00:03:56,600
If you want to keep a constant speed, you could use a value línea.

65
00:03:57,620 --> 00:04:00,880
So now it comes with a constant spin.

66
00:04:03,870 --> 00:04:07,440
There's a shorthand property for this transition properties.

67
00:04:07,950 --> 00:04:09,330
It's called transition.

68
00:04:09,360 --> 00:04:10,200
So let's try that.

69
00:04:11,410 --> 00:04:12,850
Let's common these first.

70
00:04:13,830 --> 00:04:14,850
Let's say transition.

71
00:04:15,450 --> 00:04:19,710
So whenever we work with shorthand properties, Cequent becomes very important.

72
00:04:20,100 --> 00:04:22,200
So the first one is transition property.

73
00:04:22,710 --> 00:04:25,970
So in our case, it was background color.

74
00:04:29,020 --> 00:04:29,890
Then space.

75
00:04:30,900 --> 00:04:32,280
Then it accepts the duration.

76
00:04:32,310 --> 00:04:34,350
So in our case, it was three seconds.

77
00:04:36,060 --> 00:04:38,940
After that, it accepts this timing function.

78
00:04:39,210 --> 00:04:43,660
So let's say he's in and let's save it.

79
00:04:45,440 --> 00:04:51,050
And as you can see, it still functions the same way similarly over here.

80
00:04:51,080 --> 00:04:57,440
We could replace this with the shorthand property and change the student is out.

81
00:05:01,490 --> 00:05:05,390
All right, let's say on who will want to change this Squirty Sokal.

82
00:05:10,100 --> 00:05:15,840
Before we get to the transition, let's think how do we convert squat to a circle using Sears's?

83
00:05:16,370 --> 00:05:19,320
We can use the border radius property and give a dollar value.

84
00:05:19,430 --> 00:05:20,720
Half of off with.

85
00:05:21,230 --> 00:05:22,140
Let's give that a try.

86
00:05:23,290 --> 00:05:28,410
So on, who would change the border radius to.

87
00:05:29,140 --> 00:05:31,360
So currently the word is.

88
00:05:32,430 --> 00:05:37,390
300 pixels, sábado radius can be 150 pixels, let's say.

89
00:05:38,180 --> 00:05:41,040
And now in a whoever it could reach in into a circle.

90
00:05:41,070 --> 00:05:42,450
But that color takes time.

91
00:05:43,470 --> 00:05:46,690
This is because we haven't handled the border radius transition.

92
00:05:47,040 --> 00:05:48,230
So let's try that also.

93
00:05:50,190 --> 00:05:54,190
Now, to add multiple transitions, we could just separate them using a comma.

94
00:05:55,820 --> 00:05:59,330
So instead of background color, the standards border radius.

95
00:06:02,080 --> 00:06:03,310
Let's keep order values, see?

96
00:06:04,000 --> 00:06:07,040
So three seconds on, he's in.

97
00:06:08,650 --> 00:06:11,640
Let's say that similarly for the second one.

98
00:06:19,130 --> 00:06:24,810
Border radius, three seconds on use of, let's say, would.

99
00:06:28,030 --> 00:06:32,880
All right now, and I hope it slowly converts to a so-called.

100
00:06:34,980 --> 00:06:38,530
And when I remove the most point, do it slowly and words back to square.

101
00:06:39,400 --> 00:06:40,540
Similarly for this one.

102
00:06:42,330 --> 00:06:43,900
It slowly concludes to circle.

103
00:06:44,560 --> 00:06:47,680
And when I remove it, it goes back to square.

104
00:06:48,740 --> 00:06:51,310
That's all for the transition properties.

105
00:06:52,150 --> 00:06:53,350
That's all for today, guys.

106
00:06:53,740 --> 00:06:55,870
If there is something that you did not understand.

107
00:06:55,960 --> 00:06:58,420
Feel free to drop a comment and we will discuss it.

108
00:06:58,990 --> 00:07:00,130
See you in the next video.

109
00:07:00,310 --> 00:07:00,640
Bye.

110
00:07:00,760 --> 00:07:01,510
And take care.