

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the CSS property that the transition effect is for with JavaScript?
<p style="">Use the <em>transitionProperty</em><em> </em>in JavaScript to set the CSS property. You can try to run the following code to return the CSS property that the transition effect is for with JavaScript −</p><h2>Example</h2><pre class="prettyprint notranslate"><!DOCTYPE html> <html> <head> <style> #div1 { position: relative; margin: 10px; height: 300px; width: 400px; padding: 20px; border: 2px solid blue; } #div2 { padding: 80px; position: absolute; border: 2px solid BLUE; background-color: yellow; transform: rotateY(45deg); transition: all 3s; } #div2:hover { background-color: orange; width: 50px; height: 50px; padding: 100px; border-radius: 50px; } </style> </head> <body> <p>Hover over DIV2</p> <button onclick = "display()"> Set </button> <div id = "div1">DIV1 <div id="div2">DIV2</div> </div> <script> function display() { document.getElementById("div2").style.transitionProperty = "width,height"; } </script> </body> </html></pre>
- Related Questions & Answers
- Set the name of the CSS property the transition effect is for
- Set a delay for the CSS transition effect
- How to set the speed curve of the transition effect with CSS
- How to delay the Transition Effect with CSS
- How to set the speed curve of the transition effect with JavaScript?
- How to set when the transition effect will start with JavaScript?
- Add CSS transition effect for both the width and height property
- How to create a transition effect with CSS?
- How to set the four transition properties with JavaScript?
- CSS Transition property
- Set how many seconds or milliseconds a CSS transition effect takes to complete
- Create a transition effect on hover pagination with CSS
- Set the speed of the hover effect with CSS
- CSS transition-duration property
- Set Mask Effect with CSS
Advertisements