CSS transition-timing-function Property

Last Updated : 02 Jul, 2024

The transition-timing-function property specifies the speed curve of the transition effect. It determines how CSS properties change values over time during transitions. This curve, or easing function, defines the rate of change, influencing the smoothness and perception of animation transitions on web elements.

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:

Value	Description
linear	Animation progresses at a constant speed.
ease-in	Animation starts slowly and speeds up at the end.
ease-out	Animation starts quickly and slows down at the end.
initial	Sets the property to its default value (`ease`).

Example: In this example we demonstrates the transition-timing-function property with different values: linear, ease, ease-in, and ease-out. Each div expands its width from 75px to 300px over 5 seconds when hovered, showcasing different transition speeds

<!DOCTYPE html>
<html>

<head>
    <title>CSS transition-timing-function Property</title>
    <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 the linear value in 
        the transition-timing-function property.
    </p>
    <div id="div1">linear</div>

    <p>
        This is an example for the ease value in 
        the transition-timing-function property.
    </p>
    <div id="div2">ease</div>

    <p>
        This is an example for the ease-in value in 
        the transition-timing-function property.
    </p>
    <div id="div3">ease-in</div>

    <p>
        This is an example for the ease-out value in 
        the transition-timing-function property.
    </p>
    <div id="div4">ease-out</div>
</body>

</html>