Easing CSS zoom effect.

<style type="text/css">

.big {
   position: relative;
   width: 70px;
   height: 70px;
   border-radius: 100px;
   background-color: black;
   margin: 200px;
   -webkit-animation: zoomOut 1s 1;
   animation: zoomOut 1s 1;
}
.small {
   position: absolute;
   width: 60px;
   height: 60px;
   border-radius: 100px;
   background-color: gray;
   margin-top: 5px;
   margin-left: 5px;
   text-align: center;
   line-height: 68px;
   color: white;
}
.big:hover {
   cursor: pointer;
   -webkit-animation: zoomIn 1s 1;
   animation: zoomIn 1s 1;
   -webkit-transform: scale(1.30);
   transform: scale(1.30);
}
.small:hover {
   cursor: pointer;
   -webkit-animation: bounceHover 0.4s 1;
   animation: bounceHover 0.4s 1;
}
body {
   background-color: lightblue;
}
@-webkit-keyframes zoomIn {
   0% {
       transform: scale(1);
   }
   10% {
       transform: scale(1.4);
   }
   20% {
       transform: scale(1.3);
   }
   30% {
       transform: scale(1.35)
   }
   40% {
       transform: scale(1.3);
   }
   50% {
       transform: scale(1.3);
   }
}
@keyframes zoomIn {
   0% {
       transform: scale(1);
   }
   10% {
       transform: scale(1.4);
   }
   20% {
       transform: scale(1.3);
   }
   30% {
       transform: scale(1.35)
   }
   40% {
       transform: scale(1.3);
   }
   50% {
       transform: scale(1.3);
   }
}
@-webkit-keyframes bounceHover {
   0% {
       line-height: 68px;
   }
   20%{
       line-height: 65px;
   }
   40%{
       line-height: 71px;
   }
   60%{
       line-height: 65px;
   }
   80%{
       line-height: 71px;
   }
   100%{
       line-height: 68px;
   }
}
@keyframes bounceHover {
   0% {
       line-height: 68px;
   }
   20%{
       line-height: 65px;
   }
   40%{
       line-height: 71px;
   }
   60%{
       line-height: 65px;
   }
   80%{
       line-height: 71px;
   }
   100%{
       line-height: 68px;
   }
}
@-webkit-keyframes zoomOut {
   0% {
       transform: scale(1);
   }
   10% {
       transform: scale(1.20);
   }
   20% {
       transform: scale(1.05);
   }
   30% {
       transform: scale(1.15)
   }
   40% {
       transform: scale(1.05);
   }
   50% {
       transform: scale(1.1);
   }
}
@keyframes zoomOut {
   0% {
       transform: scale(1);
   }
   10% {
       transform: scale(1.20);
   }
   20% {
       transform: scale(1.05);
   }
   30% {
       transform: scale(1.15)
   }
   40% {
       transform: scale(1.05);
   }
   50% {
       transform: scale(1.1);
   }
}

</style>

<div class="big">
<div class="small">
<img src="camera.png" />
</div>
</div>


Output :)

1)

2)