CSS transition-timing-function Property

The transition-timing-function property of CSS describes how a transition will be showcased over its duration. This will allow a transition to change its speed and different movement properties during its course. The transition-timing function specifies the time an animation uses to change from one set of CSS transitions to another. The default value of the transition-timing function is ‘ease’. This value sets the animation to a slow start then after a time period the speed increases and before it ends the speed again becomes slow.

Syntax:

animation-timing-function: <easing-function>|ease|linear|ease-in
    |ease-out|ease-in-out|cubic-bezier(p1, p2, p3, p4)|steps(n, <jumpterm>)
    |step-start|step-end|initial;

There are many different values that we can give to this property, some of them are:

linear – In this, the animation has the same speed from start to end.
ease-in – This is similar to ease just that the end of the animation is fast.
ease-out – This too is similar to ease just that the start of the animation is fast.
initial – This sets the property to its default value. The initial value of this property value is ease.

Example:

html

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            height: 75px;
            width: 75px;
            background: yellowgreen;
            color: red;
            transition: width 5s;
        }
 
        #div1 {
            transition-timing-function: linear;
        }
 
        #div2 {
            transition-timing-function: ease;
        }
 
        #div3 {
            transition-timing-function: ease-in;
        }
 
        #div4 {
            transition-timing-function: ease-out;
        }
 
        div:hover {
            width: 300px;
        }
    </style>
</head>
 
<body>
    <h1>The transition-timing-function Property.</h1>
    <p>
        This is an example for linear
        value in transition-timing-function property.
    <div id="div1">linear</div>
    </p>
    <p>
        This is an example for ease
        value in transition-timing-function property.
    <div id="div2">ease</div>
    </p>
    <p>
        This is an example for ease-in
        value in transition-timing-function property
    <div id="div3">ease-in</div>
    </p>
    <p>
        This is an example for ease-out
        value in transition-timing-function property.
    <div id="div4">ease-out</div>
    </p>
</body>
 
</html>