CSS Transitions: Easing and Other Timing Functions

[00:01] We've got our wombat revealer, and right now we are applying transitions to both opacity and transform. With the opacity transition, we are putting a 200 millisecond delay on it and then interpolating the opacity value over half a second.

[00:16] With the transform it's just the half a second interpolation with no delay. When we apply the open class to our covers, you can see that they transform, that's that rotation, and then they fade out and back.

[00:33] Our client likes this, but they've hired an independent UX consultant who has told them that, "Oh goodness, get rid of that rotation. That's not doing anybody any favors. Let's make sure that we apply a custom easing function to the opacity fade."

[00:51] You're thinking, "OK, custom easing function. Let's go. How can we do this?" It turns out that CSS transitions make this as easy for you as they make everything else. There's a couple that you can apply. We'll start with ease, for instance. Let's also increase the duration of this, because this will be better if you can watch and pay attention to the difference.

[01:20] What the ease is going to do is make the animation start slowly and then go faster and then slow down at the end. You can also just do ease in so it just kind of speeds up. You can do ease out, so it's going to start fast and then slow down. You can do ease in out.

[02:08] Obviously you're not going to be doing a two second opacity ease in and out. That doesn't make a lot of sense, but it's important to know what your options are here. You can also customize this. There's a couple special cases. You can use steps.

[02:23] What that's going to do is you give it the number of steps to take, and it's just going to chunk it. It's going to divide it up between four different steps and then the end state. Rather than having a nice linear progression, you're going to have these pre-defined slices like this.

[02:45] You're not limited to these pre-defined ones. By the way, the default, if you don't specify, it inherits linear. This is just what that looks like. What's cool is that you can define your own transition, your own ease-in function.

[03:07] This is a cubic-bezier function with these arguments. This is beyond the scope of a simple tutorial, but if your UX person gives you an ease-in function like this, CSS can just directly interpret it. Here's what this is going to look like. It's slow, slow, slow, and then kind of fast, and then eases up just a little bit at the end.

[03:32] These are pretty common. It's good to know that you can use them. By combining the property, with the duration, with the delay, with the transition timing function, you can really customize what it looks like when your transitions take place using nothing but CSS rules on top of your existing CSS changes.