
- 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 four transition properties with JavaScript?
Use the transition property in JavaScript, set the following four properties − transitionProperty, transitionDuration, transitionTimingFunction, and transitionDelay.
Example
You can try to run the following code to learn how to set the four transition properties with JavaScript −
<!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); } #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.transition = "all 2s"; } </script> </body> </html>
- Related Questions & Answers
- How to set all the four border radius properties at once with JavaScript?
- How to set when the transition effect will start with JavaScript?
- How to set the speed curve of the transition effect with JavaScript?
- How to set the column rule properties with JavaScript?
- How to set the CSS property that the transition effect is for with JavaScript?
- How to set the speed curve of the transition effect with CSS
- How to set all the outline properties in one declaration with JavaScript?
- How to set all the border top properties in one declaration with JavaScript?
- How to set all the border left properties in one declaration with JavaScript?
- How to set all the border right properties in one declaration with JavaScript?
- How to set all the background properties in one declaration with JavaScript DOM?
- How to set all outline properties in a single declaration with JavaScript?
- How to delay the Transition Effect with CSS
- Shorthand property to set all the animation properties with CSS
- Set a delay for the CSS transition effect
Advertisements