CSS3 - Animation - ZoomBorderAnimation

ZoomBorderAnimationDemo.css

 
/*The definition of the animation:*/
 
@-webkit-keyframes zoomBorderAnimation {
  from {
      border-color: rgba(87,181,212, 0.4);
      border-width: 1px;
  }
  70% {
      border-color: rgba(87,181,212, 0.8);
      border-width: 10px;
      width: 90px;
      margin-left:-10px;
      margin-top:-10px;
 
  }
  to {
     border-color: rgba(87,181,212, 1);
     border-width:5px;
     width: 80px;
     margin-left:-5px;
     margin-top:-5px;
  }
}

/*Target:*/
 

img {
  /*TBD*/
  width:70px;
  border-radius: 100px;
  border: 1px solid #57b5d4;
}
img:hover{
  -webkit-animation-name: zoomBorderAnimation;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 500ms;
  -webkit-animation-fill-mode: forwards;
}