- 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 transitionTimingFunction Property
The HTML DOM Style transitionTimingFunction property returns and modify the function that represent the speeding curve of the transition effect of an element.
Syntax
Following is the syntax −
1. Returning transitionTimingFunction
object.transitionTimingFunction
2. Modifying transitionTimingFunction
object.transitionTimingFunction = “ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() | initial | inherit”
Let us see an example of HTML DOM Style transitionTimingFunction Property −
Example
<!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 2s; } .show { font-size: 1.2rem; margin: 1rem 0; } </style> <body> <h1>DOM Style transitionTimingFunction Property Demo</h1> <div class='circle'></div> <button onclick="set()" class="btn">Set transitionTimingFunction</button> <div class="show">Now, hover on the square</div> <script> function set() { document.querySelector('.circle').style.transitionTimingFunction = "ease-in-out"; } </script> </body> </html>
Output
Click on “Set transitionTimingFunction” button and then hover on the “red” square to see the transitionTimingFunction effect.
Advertisements