Timing Functions

When it comes to transitions and animations in CSS understanding timing functions is of paramount importance because it enables one to work with the rates of changes of styles - how quickly a properly is animated at the start, how is it animated at the end and so on.

This understanding can then make it possible for developers to give elastic, accel/decel effects to transitions and animations - in short: do a lot more things apart from the monotonous linear speeds.

In this chapter we will discover timing functions from the very basic level to some more complicated graphs and concepts. It will be a long trek but an easy one to take!

What do you already know about functions in math. Are you familiar with the notations f(x) and f:x?

Transitions and animations which we will collectively call animations from now onwards, need a function describing how a property's value will change with respect to time.

Consider the linear function f(t) = t and the property opacity. The function takes a value of time in seconds and returns the corresponding value of opacity at that instance. Plotting a graph of f(t) against time gives us something similar to the following:

If you notice carefully; the function f(t) maps a value of t to a value of opacity at a constant rate. At every point t the function's rate of change is constant and hence the speed of transition throughout the duration is constant.

This is a linear function. In CSS, we denote this type of a timing function using the keyword linear - simple to remember.

Moving forward it's not always necessary for a property's value to change constantly with respect to time. The rate can increase or decrease too and this just gives us two more keywords to discover - ease-in and ease-out.

ease-in and ease-out

Let's now take another direction to understand these timing functions - we'll first see their graphs and then define what they mean and how they work.

So here are the graphs of ease-in and ease-out:

Looking at these two graphs what can you comment on how the rates of ease-in and ease-out change with respect to time?

In ease-in the rate increases with time and hence the property being transitioned starts changing slowly and as time passes, at a faster and faster rate.

If the property being transitioned was left, top or transform with translate(), we could've said that ease-in makes the element accelerate.

div {
    transition: 2s ease-in;
    /* we can also mention the function as follows:
    transition-timing-function: ease-in */
}

ease-out is the exact opposite of ease-in - instead of the rate increasing with time, in this case it decreases with it. The property starts changing quickly and as time passes, at a slower and slowe rate.

And just like before, if the property being transitioned was left, or the function translate() then we could've said that ease-out makes the element decelerate.

div {
    transition: 2s ease-out;
    /* we can also mention the function as follows:
    transition-timing-function: ease-out */
}

ease-in-out

Another function in the list of the predefined CSS timing functions is ease-in-out. So what does the name ease-in-out right away suggests about the shape of the function's graph. Try to break it up into two different portions according to the name and then it you'll be able to visualise the graph more easily.

Well ease-in-out is simply ease-in and then ease-out.

Its shape is that of ease-in plus that of ease-out.

Based on this graph, try to figure out how does the rate of ease-in-out change with respect to time.

Initially we start off slowly, then accelerate till the beginning of the ease-out graph, after which we decelerate and end of slowly. Owing to this fashion of transitioning with slow rates at both, the start and end of ease-in-out, this function tends to creates perhaps the smoothest movement effect as compared to any other timing function.

div {
    transition: 2s ease-in-out;
    /* we can also mention the function as follows:
    transition-timing-function: ease-in-out */
}

Note the word movement here: this smootheness is best seen only when we are moving an element. In a property like color, opacity etc any particular timing function can't be really regarded better over the other.