How to work with CSS Transitions?

CSSWeb DevelopmentFront End Technology

Use the transition property to work with CSS Transitions.

You can try to run the following code to implement transitions in CSS:

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 150px;
            background: blue;
            transition: width 4s;
         }
         div:hover {
            width: 200px;
         }
      </style>
   </head>
   <body>
      <h1>Heading One</h1>
      <p>Hover over the below box to change its width.</p>
      <div></div>
   </body>
</html>
raja
Published on 16-May-2018 15:46:19
Advertisements