Set how many seconds or milliseconds a CSS transition effect takes to complete



Use the transition-duration property in CSS to set how many seconds or milliseconds a CSS transition effect takes to complete −

Example

Live Demo

<!DOCTYPE html> <html>    <head>       <style>          div {             width: 150px;             height: 150px;             background: blue;             transition-property: height;             transition-duration: 2s;          }          div:hover {             height: 200px;          }       </style>    </head>    <body>       <h1>Heading One</h1>       <p>Hover over the below box to change its height.</p>       <div></div>    </body> </html>
Updated on: 2020-07-02T08:25:03+05:30

289 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements