Edit in JSRUN


            
<div class="container">
  <div class="cats12">
  <div class="cats">
    <div class="cat3"><div class="body3"></div><div class="legs3"></div><div class="cara"><div class="orejas3"></div><div class="circ3"><div class="ojos7"><div class="iris7"></div></div><div class="ojos9"><div class="iris9"></div></div><div class="boquita"></div><div class="boca7"><div class="bigo7"></div><div class="bigo9"></div></div><div class="boca9"></div></div></div></div>
    <div class="cat5"><div class="body9"></div><div class="legs7"></div><div class="cara"><div class="orejas7"></div><div class="circ7"><div class="ojos12"><div class="iris12"></div></div><div class="ojos21"><div class="iris21"></div></div><div class="boquita"></div><div class="boca12"><div class="bigo12"></div><div class="bigo21"></div></div><div class="boca21"></div></div></div></div>
<div class="cat"><div class="body"></div><div class="legs"></div><div class="cara"><div class="orejas"></div><div class="circ"><div class="ojos"><div class="iris"></div></div><div class="ojos3"><div class="iris3"></div></div><div class="boquita"></div><div class="boca"><div class="bigo"></div><div class="bigo3"></div></div><div class="boca3"></div></div></div></div>
    </div>
    </div>
</div>
body{
  background:black;
}
.container{
  position:relative;
  width:600px;
  height:600px;
  background:#04102B;
  margin:90px auto;
}
.cats12{
  position:absolute;
  margin:70px 0
}
.cara{
  position:absolute;
  width:30px;
  height:30px;
  transform-origin: top center;
  margin:121px 291px;
  animation:va 2.1s alternate ease-in-out infinite;
}
.cat3{
  position:absolute;
  margin:-12px -80px;
  transform:scale(.9)
}
.cat5{
  position:absolute;
  margin:-12px 142px;
  transform:scale(.9)
}
.circ,.circ3,.circ7{
  position:absolute;
  width:121px;
  height:121px;
  border-radius:100%;
  margin:0px -50px;
  animation:baja7 2.1s alternate infinite;
}
.circ{
  background:#d5cea6;
  border-top:5px solid #989977 ;
  border-left:5px solid #989977 ;
  border-right:5px solid #989977 ;
}
.circ3{
  background:#FFAE4C;
  border-top:5px solid #D69040 ;
  border-left:5px solid #D69040 ;
  border-right:5px solid #D69040 ;
}
.circ7{
  background:#536670;
  border-top:5px solid #38484C ;
  border-left:5px solid #38484C ;
  border-right:5px solid #38484C ;
}
.ojos,.ojos3,.ojos7,.ojos9,.ojos12,.ojos21{
  position:absolute;
  width:30px;
  height:30px;
  border-radius:100%;
  background:white;
  animation:baja 2.1s alternate infinite;
}
.ojos{
  margin:40px 9px;
  border:5px solid #989977 ;
}
.ojos3{
  margin:40px 73px;
  border:5px solid #989977 ;
}
.ojos7{
  margin:40px 9px;
  border:5px solid #D69040 ;
}
.ojos9{
  margin:40px 73px;
  border:5px solid #D69040 ;
}
.ojos12{
  margin:40px 9px;
  border:5px solid #38484C ;
}
.ojos21{
  margin:40px 73px;
  border:5px solid #38484C ;
}
.iris,.iris3,.iris7,.iris9,.iris12,.iris21{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:100%;
  animation:baja3 2.1s alternate infinite;
}
.iris{
  margin:5px 9px;
  background:#989977 ;
}
.iris3{
  margin:5px 9px;
  background:#989977 ;
}
.iris7{
  margin:5px 9px;
  background:#D69040 ;
}
.iris9{
  margin:5px 9px;
  background:#D69040 ;
}
.iris12{
  margin:5px 9px;
  background:#38484C ;
}
.iris21{
  margin:5px 9px;
  background:#38484C ;
}
.boquita{
  position:absolute;
  width:21px;
  height:21px;
  border-radius:100%;
  background:white;
  margin:75px 50px;
  animation:baja 2.1s alternate infinite;
}
.boca,.boca7,.boca12
{  
  position:absolute;
  width: 14px;
  height: 14px;
  -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  margin:70px 53px;
  animation:baja 2.1s alternate infinite;
}
.boca{
  background:#EA4DC0;
}
.boca7{
  background:#D69040;
}
.boca12{
  background:#38484C;
}
.boca::before,.boca7::before,.boca12::before{
  content:"";
  position:absolute;
  width:7px;
  height:5px;
  border-radius:100%;
  background:white;
  margin:3px 3px
}
.boca3,.boca9,.boca21{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:100%;
  margin:90px 53px;
  animation:baja12 2.1s alternate infinite;
}
.boca3{
  background:#989977 ;
}
.boca9{
  background:#D69040;
}
.boca21{
  background:#38484C;
}
.orejas,.orejas3,.orejas7{
  position:absolute;
  width: 0;
  height: 0;
  border-left: 33px solid transparent;
  border-right: 33px solid transparent;
  border-bottom: 70px solid #989977 ;
  margin:-30px -63px;
  transform:rotate(-30deg)
  }
.orejas{
  border-bottom: 70px solid #989977 ;
}
.orejas3{
  border-bottom: 70px solid #D69040 ;
}
.orejas7{
  border-bottom: 70px solid #38484C ;
}
.orejas::before,.orejas3::before,.orejas7::before{
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  margin:50px 45px;
  transform:rotate(60deg)
  }
.orejas::before{
  border-bottom: 70px solid #989977 ;
}
.orejas3::before{
  border-bottom: 70px solid #D69040 ;
}
.orejas7::before{
  border-bottom: 70px solid #38484C ;
}
.bigo,.bigo3,.bigo7,.bigo9,.bigo12,.bigo21{
  position:absolute;
  width:21px;
  height:5px;
  border-radius:3px;
 }
.bigo{
  margin:12px -21px;
  transform:rotate(-9deg);
  background:#989977 ;
}
.bigo3{
  margin:12px 16px;
  transform:rotate(9deg);
  background:#989977 ;
}
.bigo7{
  margin:12px -21px;
  transform:rotate(-9deg);
   background:#D69040 ;
}
.bigo9{
  margin:12px 16px;
  transform:rotate(9deg);
  background:#D69040 ;
}
.bigo12{
  margin:12px -21px;
  transform:rotate(-9deg);
  background:#38484C ;
}
.bigo21{
  margin:12px 16px;
  transform:rotate(9deg);
  background:#38484C ;
}
.bigo::before,.bigo3::before,.bigo7::before,.bigo9::before,.bigo12::before,.bigo21::before{
  content:"";
  position:absolute;
  width:21px;
  height:5px;
  border-radius:3px;
 }
.bigo::before{
  margin:7px 0px;
  transform:rotate(-9deg);
  background:#989977 ;
}
.bigo3::before{
  margin:7px 0px;
  transform:rotate(9deg);
  background:#989977 ;
}
.bigo7::before{
  margin:7px 0px;
  transform:rotate(-9deg);
  background:#D69040 ;;
}
.bigo9::before{
  margin:7px 0px;
  transform:rotate(9deg);
  background:#D69040 ;;
}
.bigo12::before{
  margin:7px 0px;
  transform:rotate(-9deg);
  background:#38484C ;;
}
.bigo21::before{
  margin:7px 0px;
  transform:rotate(9deg);
  background:#38484C ;;
}
.body,.body3,.body9{
  position:absolute;
  width: 121px;
  height: 142px;
  -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  background:#d5cea6;
  border:5px solid #989977 ;
  margin:212px 241px
}
.body{
  background:#d5cea6;
  border:5px solid #989977 ;
}
.body3{
  background:#FFAE4C;
  border:5px solid #D69040 ;
}
.body9{
  background:#536670;
  border:5px solid #38484C ;
 }
.body::before,.body3::before,.body9::before{
  content:"";
  position:absolute;
  width: 95px;
  height: 112px;
  -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  margin:0px 12px
}
.body::before{
  background:#EFEAC6 ;
}
.body3:before{
  background:#EDDAC9;
}
.body9:before{
  background:#9EAEBA;
}
.legs,.legs3,.legs7{
  position:absolute;
  width:30px;
  height:95px;
  border-radius:100%;
  background:#989977 ;
  margin:271px 261px;
  transform:rotate(-7deg)
}
.legs{
  background:#989977 ;
}
.legs3{
  background:#D69040 ;
}
.legs7{
  background:#38484C;
}
.legs::before,.legs3::before,.legs7::before{
  content:"";
  position:absolute;
  width:30px;
  height:95px;
  border-radius:100%;
  margin:7px 60px;
  transform:rotate(14deg)
}
.legs::before{
  background:#989977 ;
}
.legs3::before{
  background:#D69040 ;
}
.legs7::before{
  background:#38484C ;
}
@keyframes va {
  0%{transform: rotate(0deg)translatex(0px) translatey(0px)}
  35%{transform:rotate(-3deg) translatex(-7px) translatey(7px) }
  55%{transform:rotate(0deg) translatex(0px) translatey(0px)}
  75%{transform: rotate(3deg) translatex(7px) translatey(7px)}
  85%{transform: translatex(-3px) translatey(3px)}
 100%{transform: translatex(3px) translatey(-3px)}
}
@keyframes baja{
  0%{transform: rotate(0deg)translatex(0px) translatey(0px)}
  35%{transform:translatex(-3px) translatey(7px) }
  55%{transform: translatex(0px) translatey(0px)}
  75%{transform: rotate(3deg) translatex(7px) translatey(7px)}
  85%{transform: translatex(-3px) translatey(3px)}
 100%{transform: translatex(3px) translatey(-3px)}
}
@keyframes baja3{
  0%{transform: rotate(0deg)translatex(0px) translatey(0px)}
  35%{transform:translatex(-3px) translatey(3px) }
  55%{transform: translatex(0px) translatey(0px)}
  75%{transform: rotate(3deg) translatex(3px) translatey(7px)}
  85%{transform: translatex(-3px) translatey(3px)}
 100%{transform: translatex(3px) translatey(-3px)}
}
@keyframes baja12{
  0%{transform: rotate(0deg)translatex(0px) translatey(0px)}
  35%{transform:translatex(-3px) translatey(7px) }
  55%{transform: translatex(0px) translatey(0px)}
  75%{transform: rotate(3deg) translatex(7px) translatey(7px); height:9px}
  85%{transform: translatex(-3px) translatey(3px)}
 100%{transform: translatex(3px) translatey(-3px)}
}