Timing functions

The timing function is a description of the rate at which the speed of the transition changes. Animations look lifeless when they occur at a fixed, linear pace. Using timing functions can make transitions more life-like.

For example, here is an example of a transition using a linear timing function. It moves back and forth at an unchanging pace.

Contrast this to this example using cubic-bezier timing functions. You’ll see quite a big difference!

For this example we’re using customised cubic-bezier timing function:

The cubic-bezier approach in this case tells the animation to rock back a little before quickly moving to the second state, and actually goes a little past it before correcting back.

The CSS for the beginning and hover state of each example is the same, all that’s changed is the timing function.

Let’s go through each and learn how they impact the way our elements move.

If you’d like to play with these in an example, I’ve set up a CodePen here.

Linear

A linear transition moves at a steady rate from beginning to end. Since there’s no curve in the transition, it never accelerates or decelerates. This can be useful if making animations that need a steady movement, like the scenery moving past the background of a train window or a steadily rotating moon.

Ease-in

The ease-in timing function begins slowly and accelerates toward the end of the transition. It would be similar to a ball beginning to roll down a hill, finishing at the fastest speed at the bottom. Or perhaps a bored fish swimming left and right.

Ease-out

Ease-out is the opposite of ease-in. It starts fast and slows down toward the end of the transition. Useful for when something needs to appear as if it was rushing from off-screen and slowing down to stop.

Ease-in-out

Ease-in-out is a combination of both the ease-in and ease-out functions. It begins slowly, accelerates through the middle part of the transition, then slows toward the end. It could illustrate a car starting from a standstill, accelerating, then slowing down before stopping. If making a loading animation, something like this can look pretty good.

Cubic-bezier

All the timing functions we’ve seen so far are examples of cubic bezier curve. This is a curve that describes the “shape” of the timing function.

In this way, specifying a cubic-bezier timing function is like creating a timing function of our own.

They consist of 4 values, representing two co-ordinates. A cubic-bezier can look like this:

transition-timing-function: cubic-bezier(1,-0.49,.13,1.09);

The two co-ordinates here are (1, -0.49) and (.13, 1.09). On a graph, they look like this:

Rather than create these by hand, I use cubic-bezier.com. It’s a great way to create some interesting effects.

They really get fun when using values greater than 1. It’s possible to create transitions that overshoot, and bounce back.

Steps

Where most of the timing functions involve curves, the steps function divides the transition into a set of steps and jumps between each. For example, if you specify steps(4) the transition divides the duration into 4 discrete jumps (pictured above).

This is useful for sprite animation. For example, a loading spinner or animated video game character. By setting the background position at the beginning of a series of frames, the steps timing function can then be used to jump through each frame and create the appearance of movement.

To see a good example of this in action, check out the Twitter fave button animation.

You can also specify whether the transition holds the first frame for the fragment of the duration or whether it holds the final frame. The default is end, as this assumes that the first frame in the sprite is already showing before the animation begins.

We can specify which applies when setting the steps:

transition: all 2s steps(10, start);
transition: all 2s steps(10, end);

More examples

I’ve written on the subject of timing functions here if you’d like to read more and see other examples.

Homework

Following on from the previous homework example try changing the transition-timing-function value and see how it changes the way the transition feels.

You can also try changing values on this demo. Technically it’s an animation rather than a transition, but the timing function applies in the same way.