Open In App

HTML DOM TransitionEvent propertyName Property

Last Updated : 03 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The TransitionEvent propertyName property is a read-only property and used for returning the name of the CSS property associated with a transition when a transitionevent occurs.

Syntax :

event.propertyName

Return Value: It returns a string representing the transition's name.

Example: In this example, the transitionend property trigger after a CSS transition completes

html 
<!DOCTYPE html>
<html>

<head>
    <title>
      TransitionEvent propertyName Property
    </title>

    <style>
        #MyDiv {
            width: 100px;
            height: 40px;
            background: green;
            transition: 3s;
        }

        #MyDiv:hover {
            width: 300px;
        }
    </style>
</head>

<body>
    <p>
        Hover over the element to see the name of
        the CSS property the transition effect is for.
    </p>
    <div id="MyDiv"></div>
    <script>
        document.getElementById("MyDiv")
            .addEventListener("transitionend", myevent);

        function myevent(event) {
            //  Return CSS property name.
            this.innerHTML = "CSS Property used: " +
                event.propertyName;
        }
    </script>
</body>

</html>

Output:

transitionWidth11

Supported Browsers:

  • Opera
  • Internet Explorer
  • Google Chrome
  • Firefox
  • Apple Safari

Next Article
HTML Introduction

S
Shubrodeep Banerjee
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox