HTML - DOM Style Object animationTimingFunction Property

Quiz

HTML DOM Style Object animationTimingFunction property specifies speed curve of an animation. Speed curve defines how smooth the transitions will be when changing from one CSS style to other.

Syntax

Given below are the syntax to get or set the animationTimingFunction property.

Set the animationTimingFunction property:

object.style.animationTimingFunction= "linear | ease | ease-in | ease-out | cubic-bezier(n, n, n, n) | initial | inherit";

Get the animationTimingFunction property:

object.style.animationTimingFunction;

Property Values

Value	Description
linear	It specifies animation plays with the same speed from start to end.
ease	It is the default value where animation starts and ends slowly but is faster in the middle.
ease-in	It specifies slow start of the animation.
ease-out	It specifies slow end of the animation.
ease-in-out	It specifies slow start and end of the animation.
cubic-bezier(n, n, n, n)	You can specify your own values in cubic-bezier function ranging from 0 to 1.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents animation-timing-function property of the element.

Examples of HTML DOM Style Object 'animationTimingFunction' Property

The following examples illustrtaes the different property values and their effect on animation.

Set Timing-Function to 'linear' and 'cubic'

This example illustrates linear and cubic animationTimingFunction when initially it has default value as ease.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object animationTimingFunction Property
    </title>
    <style>
        #animation {
            width: 100px;
            height: 100px;
            background: #04af2f;
            position: relative;
            animation: right 3s infinite;
        }
        @keyframes right {
            from {
                left: 0px;
            }
            to {
                left: 400px;
            }
        }
    </style>
</head>
<body>
    <p>The animation has ease value by default.</p>
    <p>Click to get different timing functions.</p>
    <button onclick="linear()">Linear</button>
    <button onclick="cubic()">Cubic</button>
    <div id="animation"></div>
    <script>
        function linear() {
            document.getElementById("animation")
            .style.animationTimingFunction = "linear";
        }
        function cubic() {
            document.getElementById("animation")
            .style.animationTimingFunction = 
            "cubic-bezier(0.2,0.8,0.6,0.2)";
        }
    </script>
</body>
</html>

Set Timing-Function to 'ease-in', 'ease-out' and 'ease-in-out'

This example illustrates ease-in, ease-out and ease-in-out animationTimingFunction when initially it has default value as ease.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object animationTimingFunction Property
    </title>
    <style>
        #animation {
            width: 100px;
            height: 100px;
            background: #04af2f;
            position: relative;
            animation: right 3s infinite;
        }
        @keyframes right {
            from {
                left: 0px;
            }
            to {
                left: 400px;
            }
        }
    </style>
</head>
<body>
    <p>The animation has ease value by default.</p>
    <p>Click to get different timing functions.</p>
    <button onclick="inn()">Ease-in</button>
    <button onclick="out()">Ease-out</button>
    <button onclick="inOut()">Ease-in-out</button>
    <div id="animation"></div>
    <script>
        function inn() {
            document.getElementById("animation")
            .style.animationTimingFunction = "ease-in";
        }
        function out() {
            document.getElementById("animation")
            .style.animationTimingFunction = "ease-out";
        }
        function inOut() {
            document.getElementById("animation")
            .style.animationTimingFunction = "ease-in-out";
        }
    </script>
</body>
</html>

Supported Browsers

Property
animationTimingFunction	Yes 43	Yes 12	Yes 16	Yes 9	Yes 30

html_dom.htm

Print Page