Set the name of the CSS property the transition effect is for

CSSWeb DevelopmentFront End Technology

To set the name of the CSS property the transition effect is, use the CSS transition-property.

In the below example, we have set the property as width and set the duration as well:

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 150px;
            background: blue;
            transition-property: width;
            transition-duration: 3s;
         }
         div:hover {
            width: 250px;
         }
      </style>
   </head>
   <body>
      <h1>Heading One</h1>
      <p>Hover over the below box to change its width.</p>
      <div></div>
   </body>
</html>
raja
Seetha
Published on 16-May-2018 12:49:36
Previous Page Print Page
Next Page  
Advertisements