HTML - DOM Style Object transitionTimingFunction Property

Quiz

HTML DOM Style Object transitionTimingFunction property sets or returns the speed curve of the transition effect. This property is responsible for change in speed of transition over it's duration.

Syntax

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

Set the transitionTimingFunction property:

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

Get the transitionTimingFunction property:

object.style.transitionTimingFunction;

Property Values

Value	Description
linear	It specifies transition effect with the same speed from start to end.
ease	It is the default value which specifies transition effect with a slow starting and ending but is faster in the middle.
ease-in	It specifies slow start of the transition effect.
ease-out	It specifies slow end of the transition effect.
ease-in-out	It specifies slow start and end of the transition effect.
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 the transition timing function property of an element.

Examples of HTML DOM Style Object 'transitionTimingFunction' Property

The following examples illustrtaes the different transitionTimingFunction property values and their effect on div element.

Set transitionTimingFunction to 'linear' and 'cubic'

The following example illustrates linear and cubic transitionTimingFunction applied on div element when initially it has default value as ease.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object transitionTimingFunction Property
    </title>
    <style>
        #transition {
            padding: 50px;
            height: 200px;
            width: 200px;
            border: 2px solid black;
            margin: auto;
            background-color: azure;
            transition: all 1s ease;
        }
        #transition:hover {
            padding: 50px;
            height: 250px;
            width: 250px;
            border: 2px solid yellow;
            margin: auto;
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p>
        Click to set transition Timing Function.
    </p>
    <button onclick="linear()">Linear</button>
    <button onclick="cubic()">Cubic</button>
    <section id="transition">
        Hover over div to see transition effect.
    </section>
    <script>
        function linear() {
            document.getElementById("transition")
                .style.animationTimingFunction = "linear";
        }
        function cubic() {
            document.getElementById("transition").style
                .animationTimingFunction = "cubic-bezier(0.2,0.8,0.6,0.2)";
        }
    </script>
</body>
</html>

Set transitionTimingFunction to 'ease-in', 'ease-out' and 'ease-in-out'

The following illustrates ease-in, ease-out and ease-in-out transitionTimingFunction applied on div element when initially it has default value as ease.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object transitionTimingFunction Property
    </title>
    <style>
        #transition {
            padding: 50px;
            height: 200px;
            width: 200px;
            border: 2px solid black;
            margin: auto;
            background-color: azure;
            transition: all 1s ease;
        }
        #transition:hover {
            padding: 50px;
            height: 250px;
            width: 250px;
            border: 2px solid yellow;
            margin: auto;
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p>
        Click to set transition Timing Function.
    </p>
    <button onclick="inn()">Ease-in</button>
    <button onclick="out()">Ease-out</button>
    <button onclick="inOut()">Ease-in-out</button>
    <section id="transition">
        Hover over div to see transition effect.
    </section>
    <script>
        function inn() {
            document.getElementById("transition")
                .style.animationTimingFunction = "ease-in";
        }
        function out() {
            document.getElementById("transition")
                .style.animationTimingFunction = "ease-out";
        }
        function inOut() {
            document.getElementById("transition")
                .style.animationTimingFunction = "ease-in-out";
        }
    </script>
</body>
</html>

Supported Browsers

Property
transitionDuration	Yes 26	Yes 12	Yes 16	Yes 9	Yes 12.1

html_dom.htm

Print Page