HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> #outerDiv p{ width: 100%; text-align: center; } #outerDiv{ width: 100%; height: 150px; border: 1px solid #267326; padding: 10px; margin-bottom: 25px; display: flex; position: relative; text-align: center; } #innerDiv{ width: 80px; height: 80px; background-color: teal; color: #fff; line-height: 4; border: 1px solid #004d4d; position: absolute; top: 5%; left: 1%; transition-duration: 3s; -webkit-transition-duration: 3s; } #outerDiv:hover > #innerDiv{ left: 85%; background-color: red; } </style> </head> <body> <h1>CSS transition-property Property</h1> <div id="outerDiv"> <p>Hover Me</p> <div id="innerDiv">Div</div> </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementById("innerDiv"); function myFunction(){ x.style.transitionProperty = "left"; x.style.WebkitTransitionProperty = "left"; } </script> <p><strong>Note</strong>: Click on the button to change the 'transition-property' from all to left. Before clicking on the button, 'transition-property' will also apply to the 'background-color'.</p> </body> </html>
OUTPUT
×

Save as Private