HTML - DOM Style Object transitionProperty Property

Quiz

HTML DOM Style Object transitionProperty property specifies the CSS property name on which transition effect will be applied. First the CSS property changes then transition effect takes place for the CSS property specified by transitionProperty.

Syntax

Set the transitionProperty property:

object.style.transitionProperty= "none | all | property | initial | inherit";

Get the transitionProperty property:

object.style.transitionProperty;

Property Values

Value	Description
none	It specifies that no transition effect will be applied to any element.
all	It is the default value which specifies all element will get a transition effect.
property	It specifies a comma separated list of CSS property names for which we are setting the transition effect.
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 property of an element.

Example of HTML DOM Style Object 'transitionProperty' Property

In this example we have set height and width as property value that is after clicking on 'Set Transition' button and then hovering to div will display the transition effect only for height and width, rest of the styles will change instantly upon hovering.

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

Supported Browsers

Property
transitionProperty	Yes 26	Yes 12	Yes 16	Yes 9	Yes 12.1

html_dom.htm

Print Page