<a>
  <div class="parent">
    <div class="elements">
      <div class="el el1">
        <div class="i"></div>
        <div class="ib"></div>
        <div class="dot"></div>
        <div class="n">
          <div class="n bar"></div>
          <div class="n bigger"></div>
          <div class="n smaller"></div>
        </div>
      </div>
      <div class="el el2">
        <div class="i"></div>
        <div class="ib"></div>
        <div class="dot"></div>
        <div class="n">
          <div class="n bar"></div>
          <div class="n bigger"></div>
          <div class="n smaller"></div>
        </div>
      </div>
    </div>
  </div></a>

body {
  background: #fff;
  -webkit-transform: rotateX(0.003deg);
          transform: rotateX(0.003deg);
  height: 100vh;
}
.parent {
  background: #262626;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 256px;
  height: 256px;
  border-radius: 8px;
  overflow: hidden;
  transition: 0.2s;
}
a {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 256px;
  height: 256px;
}
.elements {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.el {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 15% 15%;
          transform-origin: 15% 15%;
}
.el2 {
  top: 150%;
}
a:hover .parent {
  -webkit-transform: translate(-50%, -50%) scale(0.9);
          transform: translate(-50%, -50%) scale(0.9);
}
a:hover .elements {
  -webkit-animation: elem 4s infinite;
          animation: elem 4s infinite;
}
a:hover .el1 {
  -webkit-animation: el1 4s infinite;
          animation: el1 4s infinite;
}
.dot {
  background: #fff;
  width: 15%;
  height: 15%;
  border-radius: 50%;
  position: absolute;
  left: 20%;
  top: 23%;
  -webkit-transform: translate(-20%, -23%);
          transform: translate(-20%, -23%);
}
.i,
.bar {
  background: #fff;
  width: 14%;
  height: 43%;
}
.i {
  position: absolute;
  left: 20%;
  top: 70%;
  -webkit-transform: translate(-20%, -70%);
          transform: translate(-20%, -70%);
}
.n.bar {
  position: absolute;
  left: 47%;
  top: 70%;
  -webkit-transform: translate(-47%, -70%);
          transform: translate(-47%, -70%);
}
.n.bigger {
  background: #fff;
  width: 33%;
  height: 43%;
  position: absolute;
  left: 75%;
  top: 70%;
  -webkit-transform: translate(-75%, -70%);
          transform: translate(-75%, -70%);
  border-top-left-radius: 60% 40%;
  border-top-right-radius: 50% 40%;
}
.n.smaller {
  background: #262626;
  width: 15%;
  height: 33%;
  position: absolute;
  left: 65%;
  top: 75%;
  -webkit-transform: translate(-65%, -75%);
          transform: translate(-65%, -75%);
  border-top-left-radius: 50% 30%;
  border-top-right-radius: 50% 30%;
}
@-webkit-keyframes elem {
  0% { top: 50%; }
  23.999999% { top: -50%; }
  24% { top: 50%; }
  46% { top: -50%; }
  69% { top: 50%; }
}
@keyframes elem {
  0% { top: 50%; }
  23.999999% { top: -50%; }
  24% { top: 50%; }
  46% { top: -50%; }
  69% { top: 50%; }
}
@-webkit-keyframes el1 {
  69% { -webkit-transform: scale(1) translate(-50%, -50%);
            transform: scale(1) translate(-50%, -50%); }
  73% {-webkit-transform: scale(0.9) translate(-50%, -50%);
            transform: scale(0.9) translate(-50%, -50%);
    opacity: 1;}
  90% {-webkit-transform: scale(5) translate(-50%, -50%);
            transform: scale(5) translate(-50%, -50%);
    opacity: 0;}
  90.000001% {-webkit-transform: scale(0.8) translate(-50%, -50%);
            transform: scale(0.8) translate(-50%, -50%);
    opacity: 0;}
  100% {opacity: 1;}
}
@keyframes el1 {
  69% {-webkit-transform: scale(1) translate(-50%, -50%);
            transform: scale(1) translate(-50%, -50%);}
  73% {-webkit-transform: scale(0.9) translate(-50%, -50%);
            transform: scale(0.9) translate(-50%, -50%);
    opacity: 1;}
  90% {-webkit-transform: scale(5) translate(-50%, -50%);
            transform: scale(5) translate(-50%, -50%);
    opacity: 0;}
  90.000001% {-webkit-transform: scale(0.8) translate(-50%, -50%);
            transform: scale(0.8) translate(-50%, -50%);
    opacity: 0;}
  100% {opacity: 1;}
}