- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style transitionDuration Property
The HTML DOM Style transitionDuration property returns and modify the duration of transition effect on an element in seconds(s) or milliseconds(ms) in an HTML document.
Syntax
Following is the syntax −
1. Returning transitionDuration
object.transitionDuration
2. Modifying transitionDuration
object.transitionDuration = “value”
Here value can be −
Value | Explanation |
---|---|
initial | It set this property value to its default value. |
inherit | It inherits this property value from its parent element. |
time | It represents the duration of a transition effect in seconds(s) or milliseconds(ms). |
Example
Let us see an example of HTML DOM Style transitionDuration Property −
<!DOCTYPE html> <html> <style> body { color: #000; height: 100vh; } .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem 0; } .circle { height: 100px; width: 100px; background-color: #db133a; } .circle:hover { height: 200px; width: 200px; border-radius: 50%; transition: all 1s; } .show { font-size: 1.2rem; margin: 1rem 0; } </style> <body> <h1>DOM Style transitionDuration Property Demo</h1> <div class='circle'></div> <button onclick="set()" class="btn">Change Transition</button> <div class="show">Now, hover on the square</div> <script> function set() { document.querySelector('.circle').style.transitionDuration = "5s"; } </script> </body> </html>
Output
Click on “Set Transition” button and then hover on the “red” square to see the transitionDuration effect.
Advertisements