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.