CSS - animation-timing-function Property

Quiz

CSS animation-timing-function property determines the speed curve of an animation which determines the time taken by an animation to make transition from one set of CSS styles to another set of CSS styles. It determines the pacing of the animation.

Syntax

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start | end) | cubic-bezier(n, n, n, n) | initial | inherit;

Property Values

Values	Description
linear	The animation has the same speed from start to end.
ease	The animation starts slowly, then speeds up and then slows down again. Default.
ease-in	The animation starts slowly and then speeds up.
ease-out	The animation plays normaly but slows down at the end.
ease-in-out	The animation starts slowly, then speeds up and then slows down again.
step-start	The animation jumps directly to the end state at the start of the keyframe animation.
step-end	The animation jumps to the end state at the end of the keyframe animation.
steps(int,start\|end)	It specifies a stepping function with the number of steps alogn with the position of the start or end (e.g., steps(6, end)).
cubic-bezier(n,n,n,n)	It defines a custom timing function using a cubic-bezier curve (e.g., cubic-bezier(0.25, 0.1, 0.25, 1.0)). Possible values are from 0 to 1.
initial	It sets the property to its default value.
inherit	It inherits the property from its parent element.

Examples of CSS Animation Timing Function Property

The following examples explain the animation-timing-function property using different values and functions.

Setting Same Speed of Animation Throughout

To let an animation have same speed from the start of the animation till the end, we use the linear value. In the following example, linear value has been used for the animation-timing-function property.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            width: 200px;
            text-align: center;
            animation-name: text;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            border: 2px solid black;
        }

        #linear {
            animation-timing-function: linear;
        }

        @keyframes text {
            from {
                margin-left: 35%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property </h2>
    <h3 id="linear">Linear value</h3>
</body>

</html>

Setting Slow Start and End to an Animation

To let an animation start slowly then take some speed and then slow down again, we use the ease value. In the following example, ease value has been used for the animation-timing-function property.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            width: 200px;
            text-align: center;
            animation-name: text;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            border: 2px solid black;
        }

        #linear {
            animation-timing-function: ease;
        }

        @keyframes text {
            from {
                margin-left: 35%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property </h2>
    <h3 id="linear">Ease value</h3>
</body>

</html>

Setting Slow Start to an Animation

To let an animation start slowly and then speed up, we use the ease-in value. In the following example, ease-in value has been used for the animation-timing-function property.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            width: 200px;
            text-align: center;
            animation-name: text;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            border: 2px solid black;
        }

        #linear {
            animation-timing-function: ease-in;
        }

        @keyframes text {
            from {
                margin-left: 35%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property </h2>
    <h3 id="linear">Ease-in value</h3>
</body>

</html>

Setting Slow End to an Animation

To let an animation play at normal pace but slow down at the end, we use the ease-out value. In the following example, ease-out value has been used for the animation-timing-function property.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            width: 200px;
            text-align: center;
            animation-name: text;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            border: 2px solid black;
        }

        #linear {
            animation-timing-function: ease-out;
        }

        @keyframes text {
            from {
                margin-left: 35%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property </h2>
    <h3 id="linear">Ease-out value</h3>
</body>

</html>

Setting Slow Start and End to an Animation

To let an animation start slowly, then pick some pace and then slow down towards the end, we can also use the combination of ease-in and ease-out valuees which is the ease-in-out value. In the following example, ease-in-out value has been used for the animation-timing-function property.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        h3 {
            width: 200px;
            text-align: center;
            animation-name: text;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            border: 2px solid black;
        }

        #linear {
            animation-timing-function: ease-in-out;
        }

        @keyframes text {
            from {
                margin-left: 35%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property </h2>
    <h3 id="linear">Ease-in-out value</h3>
</body>

</html>

Setting Abrupt Jump through Start

To let an animation directly reach the end state at the start of the animation's keyframe resulting in abrupt change, we use the step-start value. In the following example, step-start value has been used for the animation-timing-function property.

Example

     
<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 50px;
            border: 2px solid black;
            display: flex;
            justify-content: center;
            animation: move 6s infinite;
        }

        .step-start {
            animation-timing-function: step-start;
        }

        @keyframes move {
            0%,
            100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(250px);
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property</h2>
    <div class="box step-start">Step-start</div>
</body>

</html>

Setting Abrupt Jump through End

To let an animation directly reach the end state at the end of the animation's keyframe resulting in abrupt change, we use the step-end value. In the following example, step-end value has been used for the animation-timing-function property.

Example

     
<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 50px;
            border: 2px solid black;
            display: flex;
            justify-content: center;
            animation: move 6s infinite;
        }

        .step-start {
            animation-timing-function: step-end;
        }

        @keyframes move {
            0%,
            100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(250px);
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property</h2>
    <div class="box step-start">Step-end</div>
</body>

</html>

Setting Stepped Animation

To let an animation move in step intervals, we use the steps() function. It takes in two parameters, the first, an integer and the second either 'start' or 'end' specifying the point at which the change of values occur within the interval. In the following example, the integer is 4 and second parameter is start.

Example

     
<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 50px;
            border: 2px solid black;
            display: flex;
            justify-content: center;
            animation: move 6s infinite;
        }

        .step-start {
            animation-timing-function: steps(4,start);
        }

        @keyframes move {
            0%,
            100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(250px);
            }
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property</h2>
    <div class="box step-start">Steps(4,start)</div>
</body>

</html>

Setting Variable Speed Animation

To let the animation progress with variable speed, we use the custom-beizer() function. This function represent a cubic bezier curve which is defined by four pointsP0,P1,P2,P3: P0 (start) and P3 (end). In the following example, 0.1,0.7,1.0 and 0.1 values have been used in the function.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 50px;
            border: 2px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: move 6s infinite;
        }

        .cubic {
            animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
        }

        @keyframes move {
            0%,100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(250px);
            }
            
        }
    </style>
</head>

<body>
    <h2>CSS animation-timing-function property</h2>
    <div class="box cubic">Cubic Beizer</div>
</body>

</html>

Supported Browsers

Property
animation-timing-function	43.0	10.0	16.0	9.0	30.0

css_reference.htm

Print Page