Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
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
Set CSS Property for Transition Effect with JavaScript
Use the transitionProperty 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 −
Example
<!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>
Updated on: 2020-06-23T11:30:59+05:30
146 Views
Advertisements