Change a Transition's Speed with Timing Functions6:59 with Guil Hernandez
The speed of a transition can vary over its duration. The speed can accelerate and decelerate rapidly, or slowly, all based on a timing function we set. Timing functions are often called easing functions because they gradually set the pace of a transition to produce a more realistic transition effect.
- transition-timing-function - MDN
- Pure CSS Questionnaire – with easing
- Pure CSS Questionnaire – with no easing
- When we create a CSS transition, the transition follows an acceleration curve that has a set of time intervals.
- These intervals can speed up or slow down a transition.
- A timing function establishes the acceleration curve and defines the intervals where a transition speeds up and slows down.
- The default timing-function the browser applies to your transition is
- Each timing function keyword value is a shorthand for a more complex timing function created by a cubic bézier curve.
Common timing function keyword values
These keyword values determine what happens in between the beginning and end of a transition.
- ease - Starts gently, then speeds up
- linear - Maintains a linear motion, at a constant speed with no easing
- ease-in - Starts gradually and stops suddenly
- ease-out – Starts suddenly, then slows down at the end
- ease-in-out – Starts and stops gradually
The speed of a transition can vary over its duration. 0:00 The speed can accelerate and 0:03 decelerate rapidly or slowly, all based on a timing function we set. 0:05 Timing functions are often called easing functions. 0:10 Because they gradually set the pace of a transition 0:13 to produce a more realistic transition effect. 0:16 You see, real life objects don't always move at a constant speed, and 0:19 they don't just start and stop abruptly. 0:24 So, with CSS timing functions, the browser can mimic real life motion. 0:27 For instance, the CSS transitions in this example look lively and interesting. 0:32 Notice how the blue panel has a realistic bounce in its movement. 0:39 It accelerates downward or upwards, then it gradually slows down before it stops. 0:44 Take a look at how the same transition looks with no easing effects applied. 0:51 So now, the transition of the panel has no bounce. 0:56 This linear movement seems less interesting 1:00 compared to this one, doesn't it? 1:03 So a timing function can totally change the way a transition feels. 1:06 When we create a CSS transition, 1:11 the transition follows an acceleration curve that has a set of time intervals. 1:13 These intervals can speed up or slow down a transition. 1:18 So, a timing function establishes the acceleration curve and 1:22 defines the intervals where a transition speeds up and slows down. 1:26 Using the transition timing function property, 1:31 we can create these easing effects by either defining custom time intervals or 1:34 using one of these predefined timing function keyword values. 1:39 The most common ones being ease, linear, ease-in, ease-out, and ease-in-out. 1:43 These keyword values determine what happens in between the beginning and 1:50 end of a transition. 1:54 To see how they all work, 1:56 I've created a demo that displays the easing effects of each value. 1:57 So when you create a CSS transition, 2:02 the default timing function the browser applies to your transition is ease. 2:04 So even if you don't include a timing function in your CSS the browser will 2:10 gradually start and stop your transitions. 2:14 So as you can see here in the example, 2:18 the ease timing function starts gently then speeds up. 2:20 Now the linear timing function maintains a linear motion so 2:26 it's at a constant speed with no easing. 2:31 The value ease in starts gradually and stops suddenly. 2:36 So it starts slow and doesn't speed up until the end. 2:41 And the ease-out timing function has the opposite effect as ease-in. 2:44 So it starts suddenly then slows down at the end. 2:50 And ease-in-out starts and stops gradually. 2:56 So as we can see it starts slow, speeds up, then slows down. 3:00 The transition timing function value we set does not affect the actual duration of 3:06 a transition, just how fast or slow we perceive the transition to be. 3:11 So in this example, each transition is 1.8 seconds long, 3:16 Now I wanna create a new transition that displays a small icon when you hover over 3:26 the download button. 3:31 The icon will fade in, and slide in from the center, like this. 3:33 So the icon we're going to transition has a class of button icon. 3:40 And as you can see, in main.css, the icon has absolute positioning applied, 3:45 and its opacity is set to zero. 3:51 Back inside interactions.css, I'll create a new rule for 3:54 a button icon where I'll use transition property to transition 4:00 the opacity property and the left offset of the button icon. 4:05 Then I'll set the transition duration for 4:14 both properties for 0.5 seconds and 4:18 I will give them a transition delay of 0.3 seconds. 4:22 So the opacity and left offset values will both transition over 0.5 seconds and 4:28 have a delay of 0.03 seconds. 4:34 So next on hover, we'll change the values for 4:37 both the opacity and left offset of button icon. 4:40 So we'll say opacity:1 and the left offset will be 80%. 4:48 When we preview this in the browser and 4:54 hover over the download button, our transition looks great. 4:58 But now I'll add a timing function to liven it up a bit. 5:02 Back inside the button icon rule I'll type 5:08 transition-timing-function. 5:12 And let's see what the value ease-out looks like. 5:17 So the icon transition starts suddenly. 5:26 Then it sort of slows down at the end. 5:29 So let's also see what ease-in looks like. 5:33 So now the icon transition starts gradually. 5:39 And stops suddenly. 5:43 Let's do one more, let's try ease in out. 5:45 And as you can see it starts and stops gradually. 5:52 So I like ease out so I'll go ahead and set the timing function 5:57 value to ease out and you can use whichever one you like best. 6:02 Like the other transition properties we can specify a comma separated list of 6:10 values for transition timing functions. 6:14 And each timing function value will be applied 6:17 to the corresponding properties listed in transition property. 6:20 So for example if I add ease in out as the first transition timing function value. 6:25 The value ease in out applies to the opacity 6:33 while ease out applies to the left offset property. 6:38 Each timing function keyword value is actually a short hand for 6:42 a more complex timing function created by a cubic-bezier curve. 6:47 In a later video you'll learn how you can customize timing functions and 6:51 create interesting easing effects using cubic bezier functions. 6:55
You need to sign up for Treehouse in order to download course files.Sign up