CSS Transition in Examples

<!DOCTYPE html>
<html>

  <head>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: red;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        -webkit-transition: background-color 2s ease-out;
        -moz-transition: background-color 2s ease-out;
        -o-transition: background-color 2s ease-out;
        transition: background-color 2s ease-out;
      }
      
      div:hover {
        background-color: green;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    
    <div></div>
    
  </body>

</html>

/* Styles go here */