Try it Live

​x
 
<!DOCTYPE html>
<html>
  <head>
    <style> 
     .animation-val {
      border:2px solid black;
      width:200px;
      height:200px;
      background-color:deepskyblue;
     }
     
     @-webkit-keyframes firstanimation {
      from {border-radius:30%;}
      to {border-radius:50%;}
     }
     
     @keyframes firstanimation {
      from {border-radius:30%;}
      to {border-radius:50%;}
     }
     
     .animation-val:hover {
      -webkit-animation-name:firstanimation;
      animation-name:firstanimation;
      -webkit-animation-duration:1s;
      animation-duration:1s;
      -webkit-animation-iteration-count:3;
      animation-iteration-count:5;
     }
    </style>
  </head>
  <body>
    <h2> Example for animation on Hover</h2>
    <div class="animation-val"></div>
  </body>
</html>
​