CSS transition-timing-function Property

The CSS transition-timing-function property specifies the speed pattern of a transition effect, controlling how the animation progresses from start to end.

Controls the speed of a transition.
Supports values like ease, linear, ease-in, ease-out, and ease-in-out.
Allows custom timing curves using cubic-bezier().

Syntax:

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

Property Values of CSS transition-timing-function

linear: The transition progresses at a constant speed.
ease-in: The transition starts slowly and speeds up.
ease-out: The transition starts quickly and slows down at the end.
initial: Sets the property to its default value, ease.

Example of CSS transition-timing-function Property

Example: Demonstrates the transition-timing-function property using linear, ease, ease-in, and ease-out, showing different transition speeds as each element expands on hover.

html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>CSS transition-timing-function Property</title>
<!--Driver Code Ends-->

    <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>

<!--Driver Code Starts-->
</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>

<!--Driver Code Ends-->

Output:

CSS transition-timing-function Property

Property Values of CSS transition-timing-function

Example of CSS transition-timing-function Property

Explore