04 Button style rollover animation

Details

How to animate the rollover of a "button"

<!DOCTYPE html>
<html>

<head>

<style>
  #mybox {
    display:block;
    margin:150px auto;
    color:#eeeeee;
    -webkit-border-radius:8px;
    opacity:0.45;
    background:red;
    width:120px;
    height:20px;
    text-align:center;
    -webkit-transition:
      -webkit-transform 0.45s, 
      opacity 0.45s, 
      background 0.45s,
      width 0.45s,
      height 0.45s;
  }
  
  #mybox:hover {
    -webkit-transform:rotate(5deg);
    opacity:1;
    background:blue;
    width:122px;
    height:22px;
    cursor:pointer;
  }


</style>

</head>

<body>
  <div id="mybox">click me</div>
</body>
  
</html>