1
00:00:00,960 --> 00:00:05,700
OK, so next up, we're going to learn about transition time and function properties, also known as

2
00:00:05,700 --> 00:00:07,350
specifying speed curves.

3
00:00:08,040 --> 00:00:14,580
Now, the transition time function properties will specify the speed of a transition and they have the

4
00:00:14,580 --> 00:00:15,840
following values.

5
00:00:16,200 --> 00:00:21,900
Linear ease is in, is out and is in, out.

6
00:00:22,140 --> 00:00:24,390
And we'll take a look at each and every one of them.

7
00:00:25,080 --> 00:00:26,400
So let's start with.

8
00:00:27,570 --> 00:00:28,200
Linnear.

9
00:00:30,370 --> 00:00:39,880
In here calling linear and interpreting it correctly, you get so linear for this, I'm going to take

10
00:00:39,880 --> 00:00:42,820
that idea of div one that we created.

11
00:00:44,900 --> 00:00:49,610
First of all, it changes background color to blue, so I know which one it is.

12
00:00:52,890 --> 00:00:55,080
And then we'll type in transition.

13
00:00:57,690 --> 00:00:58,920
Timing function.

14
00:01:00,750 --> 00:01:08,250
Now, just choose linear and what this does is this will specify a transition effect with the same speed

15
00:01:08,490 --> 00:01:13,050
from the start to the end, it will have the exactly the same speed.

16
00:01:14,280 --> 00:01:20,850
Now, let me also go down here and let's say transition from the width and heights.

17
00:01:20,850 --> 00:01:29,580
Actually, take this take this very quickly and let's change it to now let's let's just leave it this

18
00:01:29,580 --> 00:01:29,800
way.

19
00:01:30,210 --> 00:01:35,520
So this effect so this what we did here will take effect over all of our day.

20
00:01:35,530 --> 00:01:37,790
So each and every day will have the same effect.

21
00:01:38,190 --> 00:01:41,340
But the difference will be this is the linear effect.

22
00:01:42,320 --> 00:01:50,360
This is a straightforward first effect of the transition of the sort of timing, the the speed curve.

23
00:01:51,290 --> 00:01:53,390
Now let's take a look at ease.

24
00:01:55,360 --> 00:02:04,860
I'm just going to with this change, the the divided to number, to the second divided and also let's

25
00:02:04,870 --> 00:02:07,660
change its color to, let's say green.

26
00:02:11,290 --> 00:02:19,330
And now we can change it to ease and what ease will do is it will specify a transition effect with a

27
00:02:19,330 --> 00:02:22,660
slow start, then a fast and then.

28
00:02:23,880 --> 00:02:29,970
A slow end, and I said this is a pretty much a default timing function.

29
00:02:30,780 --> 00:02:32,100
Let's take a look at how this looks.

30
00:02:32,170 --> 00:02:33,870
First of all, the here again.

31
00:02:36,070 --> 00:02:37,060
And now that is.

32
00:02:38,530 --> 00:02:41,250
It's so hot, it starts a bit quicker.

33
00:02:42,490 --> 00:02:48,130
But then it slows down and then it takes on its initial effect.

34
00:02:48,720 --> 00:02:50,270
But this is pretty much linear.

35
00:02:50,320 --> 00:02:53,230
It's straightforward, it never changes its speed.

36
00:02:54,370 --> 00:02:59,310
But this one has a slow start and then it takes a blast effect and then a slow and again.

37
00:03:00,210 --> 00:03:06,610
OK, now, next, let's take a look at ease in this competitive again as we go up here.

38
00:03:07,870 --> 00:03:16,470
Changed it to free, changed the color to yellow, you can change whatever you want, I'm just going

39
00:03:16,480 --> 00:03:22,870
with a few close you and now listen to a dash and in now what this will do.

40
00:03:22,870 --> 00:03:27,070
So the ezine will specify the transition effect with a slow start.

41
00:03:28,300 --> 00:03:35,000
Okay, so I have here something that I don't need, so this would be the yellow one, I want to change

42
00:03:35,000 --> 00:03:42,920
the color to black, the tax code of color and hash I 350.

43
00:03:44,160 --> 00:03:46,260
That's seconds, Mike.

44
00:03:47,420 --> 00:03:48,380
Oh, much better.

45
00:03:49,070 --> 00:03:51,170
So let's take a look at Linnear again.

46
00:03:53,260 --> 00:03:54,070
Then ease.

47
00:03:55,310 --> 00:03:56,390
And now easing.

48
00:03:57,360 --> 00:04:02,520
Is how slowly it starts and then speeds up it.

49
00:04:04,640 --> 00:04:16,340
A next stop will be east out west compared this year change to for you just shortly for clearing this

50
00:04:16,340 --> 00:04:16,530
up.

51
00:04:16,550 --> 00:04:18,560
These are the days that we're targeting, OK?

52
00:04:22,310 --> 00:04:25,270
So let's change its color to purple.

53
00:04:28,760 --> 00:04:32,600
And they're going to take out the color of the text.

54
00:04:33,050 --> 00:04:38,460
Now, we said that this will be is out and what is out will do.

55
00:04:38,870 --> 00:04:46,850
It will specify a transition effect with this law and so that it's safe and let's try out or ease up.

56
00:04:50,070 --> 00:04:55,230
So it started much quicker than it is in estar slowly.

57
00:04:56,520 --> 00:05:02,400
This started quickly and then it has a slow and now last one will be easing out.

58
00:05:02,950 --> 00:05:04,470
So let's take our fictive.

59
00:05:09,710 --> 00:05:11,780
And a stipend is in.

60
00:05:14,060 --> 00:05:21,740
They're out now the is in our specifies a transition effect with a slow start and a slow and.

61
00:05:24,800 --> 00:05:27,860
And this changes to orange.

62
00:05:33,720 --> 00:05:45,060
OK, so he's out again, the slow and easy with a slow start and is in ultra slow start and slow and

63
00:05:45,880 --> 00:05:50,540
OK, so that's pretty much it for transition properties, time and functional properties.

64
00:05:50,550 --> 00:05:51,630
So see in the next one.