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!

## Background of functions

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.