Check out a free preview of the full CSS In-Depth, v2 course:
The "Timing Functions" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

An overview of cubic beziers, the easing timing functions, which can be used to improve your animation, making them look more natural instead of robotic.

Get Unlimited Access Now

Transcript from the "Timing Functions" Lesson

[00:00:01]
>> Estelle Weyl: Okay, animation-timing-function. This is probably one of the two most complex parts of animation, and it's also valid for your transitions. So I didn't cover this during transitions, because it's much easier to see when you're animating than when you're transitioning. But there's several different values. There's ease, ease-in, ease-out, step-start, step-end, linear, ease-out, and cubic-bezier, and step functions.

[00:00:29] So I'm gonna just do linear. It's going to go across the page in a linear fashion. Doesn't change speed, it's always the same speed. But if you're doing someone who's walking or a ball that's dropping, that doesn't look natural. When you're dropping a ball, it actually eases in.

[00:00:47] It starts slow and then it goes faster, right? If you're a car you start slow and you go faster. If you're stopping a car, you stop, you're going fast and then you slow down. So that's ease-out. ease-in-out would be you start walking and then you stop walking.
>> Estelle Weyl: And then there's just ease.

[00:01:16]
>> Estelle Weyl: I can't remember what ease does. But I did this nifty little thing where you can just test it. So let's just do ease.
>> Estelle Weyl: It slows down at the end. Ease slows down at the end, okay.
>> Estelle Weyl: I have no clue what that's supposed to do.
>> Estelle Weyl: Let's go back to, it's cuz there was a delay, I'm sorry.

[00:01:57] It was a five second delay for me to explain something. So then we have cubic-bezier functions. What I'm gonna do is go to is I'm actually gonna go to cubic-bezier.com. And cubic-bezier.com is a site done by Lea Verou. And it's a really easy way to visualize it. So there's a default of ease, linear, ease-in, ease-out, and ease-in-out, and you can compare them.

[00:02:19] So here I'm going to compare linear with ease.
>> Estelle Weyl: And then with ease-in, and then with ease-out, and then with ease-in-out. So you're basically your looking at the green one to see how it goes. Then you can take these things and you can create your own cubic bezier function.

[00:02:48] And then what you're gonna do is you're gonna see that it's gonna go beyond its bounding box, so the green one's gonna go a little crazy, or the pink one, rather.
>> Estelle Weyl: And if you want to see it a little bit slower,
>> Estelle Weyl: You see how it goes beyond its bounding box, because I gave a cubic-bezier function.

[00:03:09] A cubic-bezier function, it takes four parameters. The first and the third have to be between zero and one or zero and negative one I think, and then the two others can be anything. And the crazier you go with the numbers, the more outside of the number one or negative one the are, the crazier it will be.

[00:03:27] So here I did a, all I have to do is break something, and then I can add it back in. And let's just get rid of, okay, so this box, I'm telling it to go from 100 pixels height with a width of 500, to a height of 100 with a width of 100.

[00:03:54] But to restart a function, I just break it and then I add it back in and then we go again. So you see how it's going way below the 100? And actually way above the 500? That's because my cubic bezier is out of the range, if I just change this to one and one.

[00:04:11] And, I just add this back in. It's gonna stay within that mark. Its gonna be a boring animation, but it's going to stay within that mark. So, cubic bezier. We have ease-in, ease in-out, linear, ease-out, a cubic bezier that you can define yourself, and here's a decent way of playing with it, linear.

[00:04:37] Here you're gonna see that it's just linear.