HTML - DOM Style Object transition Property

Quiz

HTML DOM Style Object transition property is a shorthand property of four transition properties mentioned below:

transitionProperty
transitionDuration
transitionTimingFunction
transitionDelay

It adds an animation like effect while changing the CSS property of any block level element when hovered over it.

Syntax

Set the transition property:

object.style.transition= "property duration timing-function delay | initial | inherit";

Get the transition property:

object.style.transition;

Property Values

Value	Description
transitionProperty	It is used to specify CSS property name for which we are setting the transition effect.
transitionDuration	It is used to specify amount of time in seconds or milliseconds taken by transition effect to complete. The transition property will have no effect if this property value is set to 0.
transitionTimingFunction	It is used to specify speed curve of transition.
transitionDelay	It specifies the time, when transition effect will start.
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 property of an element.

Example of HTML DOM Style Object 'transition' Property

The following example set the transition property of div element which changes it's height, width, color, background-color and border color on hover.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object transition Property
    </title>
    <style>
        #transition {
            padding: 50px;
            height: 200px;
            width: 200px;
            border: 2px solid black;
            margin: auto;
            background-color: azure;
        }
        #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 property.
    </p>
    <button onclick="fun()">Set Transition</button>
    <div id="transition">
        Hover over div to see transition effect.
    </div>
    <script>
        function fun() {
            document.getElementById("transition")
                .style.transition = "all 1s linear";
        } 
    </script>
</body>
</html>

Supported Browsers

Property
transition	Yes 26	Yes 12	Yes 16	Yes 9	Yes 12.1

html_dom.htm

Print Page