Hover Animation

working on mouse hover animation with css

by sendil J

HTML

<div class="container">
  <div class="box rotate2"></div>
</div>

<div class="expand rotate2">

</div>

CSS

.box {
  margin: 50px auto;
  background: #5FCF80;
  width: 150px;
  height: 150px;
}

.box:hover {
  -webkit-transform: rotate(360deg);
  background: #9351A6;
  border-radius: 50%;
}
.expand{width:50px; height:50px; background:lightblue;margin-left:0px;}
.expand:hover{width:100px;margin-left:50px;}
.rotate2 {
  -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.rotate2:hover {
  -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}