1
00:00:00,270 --> 00:00:03,780
The speed of a transition
can vary over its duration.

2
00:00:03,780 --> 00:00:05,490
The speed can accelerate and

3
00:00:05,490 --> 00:00:10,940
decelerate rapidly or slowly,
all based on a timing function we set.

4
00:00:10,940 --> 00:00:13,790
Timing functions are often
called easing functions.

5
00:00:13,790 --> 00:00:16,810
Because they gradually set
the pace of a transition

6
00:00:16,810 --> 00:00:19,870
to produce a more realistic
transition effect.

7
00:00:19,870 --> 00:00:24,420
You see, real life objects don't
always move at a constant speed, and

8
00:00:24,420 --> 00:00:27,350
they don't just start and stop abruptly.

9
00:00:27,350 --> 00:00:32,550
So, with CSS timing functions,
the browser can mimic real life motion.

10
00:00:32,550 --> 00:00:39,040
For instance, the CSS transitions in this
example look lively and interesting.

11
00:00:39,040 --> 00:00:44,400
Notice how the blue panel has
a realistic bounce in its movement.

12
00:00:44,400 --> 00:00:51,090
It accelerates downward or upwards, then
it gradually slows down before it stops.

13
00:00:51,090 --> 00:00:56,320
Take a look at how the same transition
looks with no easing effects applied.

14
00:00:56,320 --> 00:01:00,290
So now,
the transition of the panel has no bounce.

15
00:01:00,290 --> 00:01:03,780
This linear movement
seems less interesting

16
00:01:03,780 --> 00:01:06,650
compared to this one, doesn't it?

17
00:01:06,650 --> 00:01:11,600
So a timing function can totally
change the way a transition feels.

18
00:01:11,600 --> 00:01:13,980
When we create a CSS transition,

19
00:01:13,980 --> 00:01:18,830
the transition follows an acceleration
curve that has a set of time intervals.

20
00:01:18,830 --> 00:01:22,560
These intervals can speed up or
slow down a transition.

21
00:01:22,560 --> 00:01:26,660
So, a timing function establishes
the acceleration curve and

22
00:01:26,660 --> 00:01:31,190
defines the intervals where
a transition speeds up and slows down.

23
00:01:31,190 --> 00:01:34,300
Using the transition
timing function property,

24
00:01:34,300 --> 00:01:39,690
we can create these easing effects by
either defining custom time intervals or

25
00:01:39,690 --> 00:01:43,800
using one of these predefined
timing function keyword values.

26
00:01:43,800 --> 00:01:50,180
The most common ones being ease, linear,
ease-in, ease-out, and ease-in-out.

27
00:01:50,180 --> 00:01:54,640
These keyword values determine what
happens in between the beginning and

28
00:01:54,640 --> 00:01:56,240
end of a transition.

29
00:01:56,240 --> 00:01:57,470
To see how they all work,

30
00:01:57,470 --> 00:02:02,370
I've created a demo that displays
the easing effects of each value.

31
00:02:02,370 --> 00:02:04,860
So when you create a CSS transition,

32
00:02:04,860 --> 00:02:10,180
the default timing function the browser
applies to your transition is ease.

33
00:02:10,180 --> 00:02:14,530
So even if you don't include a timing
function in your CSS the browser will

34
00:02:14,530 --> 00:02:18,190
gradually start and stop your transitions.

35
00:02:18,190 --> 00:02:20,690
So as you can see here in the example,

36
00:02:20,690 --> 00:02:24,970
the ease timing function
starts gently then speeds up.

37
00:02:26,710 --> 00:02:31,720
Now the linear timing function
maintains a linear motion so

38
00:02:31,720 --> 00:02:34,510
it's at a constant speed with no easing.

39
00:02:36,270 --> 00:02:41,280
The value ease in starts gradually and
stops suddenly.

40
00:02:41,280 --> 00:02:44,898
So it starts slow and
doesn't speed up until the end.

41
00:02:44,898 --> 00:02:50,460
And the ease-out timing function
has the opposite effect as ease-in.

42
00:02:50,460 --> 00:02:53,813
So it starts suddenly then
slows down at the end.

43
00:02:56,790 --> 00:03:00,258
And ease-in-out starts and
stops gradually.

44
00:03:00,258 --> 00:03:04,360
So as we can see it starts slow,
speeds up, then slows down.

45
00:03:06,930 --> 00:03:11,890
The transition timing function value we
set does not affect the actual duration of

46
00:03:11,890 --> 00:03:16,920
a transition, just how fast or
slow we perceive the transition to be.

47
00:03:16,920 --> 00:03:21,083
So in this example,
each transition is 1.8 seconds long,

48
00:03:26,160 --> 00:03:31,006
Now I wanna create a new transition that
displays a small icon when you hover over

49
00:03:31,006 --> 00:03:33,190
the download button.

50
00:03:33,190 --> 00:03:37,420
The icon will fade in, and
slide in from the center, like this.

51
00:03:40,500 --> 00:03:45,620
So the icon we're going to transition
has a class of button icon.

52
00:03:45,620 --> 00:03:51,770
And as you can see, in main.css,
the icon has absolute positioning applied,

53
00:03:51,770 --> 00:03:54,216
and its opacity is set to zero.

54
00:03:54,216 --> 00:04:00,350
Back inside interactions.css,
I'll create a new rule for

55
00:04:00,350 --> 00:04:05,435
a button icon where I'll use
transition property to transition

56
00:04:05,435 --> 00:04:10,420
the opacity property and
the left offset of the button icon.

57
00:04:14,260 --> 00:04:18,715
Then I'll set the transition duration for

58
00:04:18,715 --> 00:04:22,799
both properties for 0.5 seconds and

59
00:04:22,799 --> 00:04:28,510
I will give them a transition
delay of 0.3 seconds.

60
00:04:28,510 --> 00:04:34,350
So the opacity and left offset values
will both transition over 0.5 seconds and

61
00:04:34,350 --> 00:04:37,310
have a delay of 0.03 seconds.

62
00:04:37,310 --> 00:04:40,570
So next on hover,
we'll change the values for

63
00:04:40,570 --> 00:04:45,130
both the opacity and
left offset of button icon.

64
00:04:48,920 --> 00:04:54,720
So we'll say opacity:1 and
the left offset will be 80%.

65
00:04:54,720 --> 00:04:58,520
When we preview this in the browser and

66
00:04:58,520 --> 00:05:02,280
hover over the download button,
our transition looks great.

67
00:05:02,280 --> 00:05:05,920
But now I'll add a timing
function to liven it up a bit.

68
00:05:08,600 --> 00:05:12,605
Back inside the button icon rule I'll type

69
00:05:12,605 --> 00:05:17,497
transition-timing-function.

70
00:05:17,497 --> 00:05:22,094
And let's see what the value
ease-out looks like.

71
00:05:26,758 --> 00:05:29,960
So the icon transition starts suddenly.

72
00:05:29,960 --> 00:05:33,120
Then it sort of slows down at the end.

73
00:05:33,120 --> 00:05:36,185
So let's also see what ease-in looks like.

74
00:05:39,799 --> 00:05:43,110
So now the icon transition
starts gradually.

75
00:05:43,110 --> 00:05:44,820
And stops suddenly.

76
00:05:45,850 --> 00:05:47,517
Let's do one more, let's try ease in out.

77
00:05:52,357 --> 00:05:55,330
And as you can see it starts and
stops gradually.

78
00:05:57,620 --> 00:06:02,174
So I like ease out so I'll go ahead and
set the timing function

79
00:06:02,174 --> 00:06:06,743
value to ease out and
you can use whichever one you like best.

80
00:06:10,339 --> 00:06:14,918
Like the other transition properties we
can specify a comma separated list of

81
00:06:14,918 --> 00:06:17,960
values for transition timing functions.

82
00:06:17,960 --> 00:06:20,580
And each timing function
value will be applied

83
00:06:20,580 --> 00:06:25,070
to the corresponding properties
listed in transition property.

84
00:06:25,070 --> 00:06:33,190
So for example if I add ease in out as the
first transition timing function value.

85
00:06:33,190 --> 00:06:38,030
The value ease in out
applies to the opacity

86
00:06:38,030 --> 00:06:41,700
while ease out applies to
the left offset property.

87
00:06:42,760 --> 00:06:47,260
Each timing function keyword value
is actually a short hand for

88
00:06:47,260 --> 00:06:51,500
a more complex timing function
created by a cubic-bezier curve.

89
00:06:51,500 --> 00:06:55,520
In a later video you'll learn how you
can customize timing functions and

90
00:06:55,520 --> 00:06:59,400
create interesting easing effects
using cubic bezier functions.