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.
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](http://codepen.io/donovanh/pen/GgaRNv).
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.
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.
Rather than create these by hand, I use [cubic-bezier.com](http://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](https://cssanimation.rocks/twitter-fave/) 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:
I've written on the subject of [timing functions here](https://medium.com/css-tutorials/bouncy-transitions-c0c8085d489) if you'd like to read more and see other examples.
Following on from [the previous homework example](http://codepen.io/donovanh/pen/NPYNGa?editors=110) 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](http://codepen.io/donovanh/pen/GgaRNv). Technically it's an animation rather than a transition, but the timing function applies in the same way.
