Edit in JSRun


            
<div class="container">
<div class="dog">
  <div class="body"><div class="legs3"></div><div class="legs"></div></div>
  <div class="head">
  <div class="orejas"></div>
  <div class="cabeza"><div class="ojos"><div class="iris"></div><div class="iris3"></div><div class="iris4"></div><div class="iris5"></div><div class="iris6"></div><div class="iris7"></div></div><div class="boca"></div><div class="ceja"></div><div class="ceja3"></div></div>
  </div>
  </div>
  <div class="dog3">
    <div class="body5">
   <div class="legs7"></div>
    <div class="legs9"></div>
   <div class="cola"></div>
    <div class="body3"><div class="legs12"></div><div class="legs21"></div> </div></div>
  <div class="head3">
  <div class="orejas3"></div>
    <div class="orejas5"></div>
  <div class="cabeza3"><div class="ojos3"><div class="iris"></div><div class="iris3"></div><div class="iris4"></div><div class="iris5"></div><div class="iris6"></div><div class="iris7"></div></div><div class="boca5"></div><div class="boca3"></div></div>
  
  </div>
  </div>

</div>
body{
 background:black;
}

.container{
  position:relative;
  width:800px;
  height:600px;
  background:white;
  margin:132px auto;
}
.dog{
  position:absolute;
  margin:102px -40px;
  animation:shakes .3s alternate infinite;
}
.dog3{
  position:absolute;
  margin:95px 12px;
  transform:scale(.95);
}
.body5{
  position:absolute;
  animation:rodar .9s alternate infinite;
  
}
.head,.head3{
  position:absolute;
  transform-origin:50% 0%;
  width:30px;
  height:30px;
  background:red;
  
}
.head{
  margin:212px 271px;
  animation:rotar 3s alternate infinite;
}
.head3{
   margin:291px 490px;
  animation:rot .9s alternate infinite;
}
.cabeza,.cabeza3{
  position:absolute;
  width:112px;
  height:121px;
  border-radius:100%;
  background:#CEA690;
  border-bottom:7px solid #CE8A65;
  border-right:7px solid #CE8A65;
  border-left:7px solid #CE8A65;
 }
.cabeza{
   margin: -90px -50px;
}
.cabeza3{
   margin: -70px -50px;
  transform:rotate(-73deg)
}
.orejas{
  position:absolute;
  width:40px;
  height:152px;
  border-radius:100%;
  background:#CEA690;
  border:5px solid #CE8A65;
  margin:-93px -60px;
  transform:rotate(21deg)
  }
.orejas::before{
  content:"";
  position:absolute;
  width:40px;
  height:152px;
  border-radius:100%;
  background:#CEA690;
  border:5px solid #CE8A65;
  margin:-40px 83px;
  transform:rotate(-42deg)
  
}
.ojos{
  position:absolute;
  width:30px;
  height:40px;
  border-radius:100%;
  background:white;
  margin:45px 5px;
  transform:rotate(-12deg)
}
.ojos3{
  position:absolute;
  width:30px;
  height:40px;
  border-radius:100%;
  background:white;
  margin:45px 5px;
  transform:rotate(-12deg);
  animation:cierra .9s alternate infinite;
}
.ojos::before{
  content:"";
  position:absolute;
  width:30px;
  height:40px;
  border-radius:100%;
  background:white;
  margin:14px 73px;
  transform:rotate(24deg)
}
.ojos3::before{
  content:"";
  position:absolute;
  width:30px;
  height:40px;
  border-radius:100%;
  background:white;
  margin:14px 73px;
  transform:rotate(24deg)
}
.iris, .iris3{
  position:absolute;
  width:27px;
  height:37px;
  border-radius:100%;
  background:black;
 
}
.iris{
   transform:rotate(-12deg);
  margin: 3px 3px
}
.iris3{
   transform:rotate(24deg);
  margin: 16px 73px
}
.iris4{
   position:absolute;
  width:7px;
  height:7px;
  border-radius:100%;
  background:#ccc;
  margin:9px 5px;
 animation:shake .3s alternate infinite;
}
.iris5{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:100%;
  background:#ccc;
  margin:21px 90px;
  animation:shake .3s alternate infinite;
}
.iris6{
   position:absolute;
  width:9px;
  height:9px;
  border-radius:100%;
  background:#ccc;
  margin:25px 7px;
   animation:shake .3s alternate infinite;
}
.iris7{
   position:absolute;
  width:9px;
  height:9px;
  border-radius:100%;
  background:#ccc;
  margin:40px 85px;
   animation:shake .3s alternate infinite;
}
.boca, .boca3{
  position:absolute;
  width:25px;
  height:55px;
  border-radius:100%;
  background:#604339;
  border:1px solid #442100;
  }
.boca{
  margin:70px 34px;
   animation:sube .9s alternate infinite;
}
.boca3{
   transform:rotate(-121deg);
  margin:73px 13px;
  animation:sube3 .9s alternate infinite;
}
.boca::before,.boca3::before{
  content:"";
  position:absolute;
  width:25px;
  height:55px;
  border-radius:100%;
  background:#604339;
  border:1px solid #442100;
  }
.boca::before{
  margin:-3px 21px;
  transform:rotate(-14deg)
}
.boca3::before{
  margin:50px -27px;
  transform:rotate(-121deg)
}
.boca::after, .boca3::after{
  content:"";
  position:absolute;
    width: 25px;
  height: 17px;
  -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  background:#350900;
  }
.boca::after{
  transform:rotate(-192deg);
  margin:-3px 7px
}
.boca3::after{
  transform:rotate(-63deg);
  margin:50px -3px
}
.boca5{
  position:absolute;
  width:45px;
  height:30px;
  border-radius:0 0 45px 45px;
  background:#ff6666;
   border:7px solid #442100;
  margin:83px 27px;
  animation:abre .9s alternate infinite;
}
.ceja{
  position:absolute;
   width: 0;
  height: 0;
  border-bottom: 12px solid black;
  border-right: 45px solid transparent;
  transform:rotate(132deg);
  margin:33px 0;
  animation:rotar3 3s alternate infinite;
}
.ceja3{
   position:absolute;
   width: 0;
  height: 0;
  border-bottom: 45px solid black;
  border-left: 12px solid transparent;
  transform:rotate(121deg);
  margin:10px 87px;
  animation:rotar5 3s alternate infinite;
}
.body{
  position:absolute;
   width: 102px;
  height: 102px;
  -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  background:#AD877E;
  margin:231px 233px
}
.body3{
  position:absolute;
    width: 112px;
  height: 121px;
  -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  background:#AD877E;
  margin:241px 545px;
  transform:rotate(-95deg);
}
.legs{
  position:absolute;
  width:25px;
  height:60px;
  border-radius:30px ;
  background:#AD786B;
    margin:47px 12px;
  transform:rotate(12deg)
}
.legs::before{
  content:"";
  position:absolute;
  width:25px;
  height:60px;
  border-radius:30px ;
  background:#AD786B;
    margin:-9px 50px;
  transform:rotate(-24deg)
}
.legs3{
  position:absolute;
  width:112px;
  height:73px;
  border-radius:100%;
  background:#AD877E;
  margin:33px -5px
}
.legs3::before,.legs3::after{
content:"";
  position:absolute;
  width:30px;
  height:21px;
  border-radius:30px;
   background:#AD786B;
}
.legs3::before{
    margin:45px -12px
}
.legs3::after{
    margin:45px 90px
}
.orejas3,.orejas5{
  position:absolute;
  width:30px;
  height:50px;
  background:#CEA690;
  border:5px solid #CE8A65;
  }
.orejas3{
   margin:-3px -33px;
  transform:rotate(12deg);
    animation:rotar12 .9s alternate infinite;
}
.orejas5{
   margin:-90px 0px;
  transform:rotate(24deg);
  animation:rotar21 .9s alternate infinite;
}
.orejas3::before,.orejas5::before{
  content:"";
  position:absolute;
  width:90px;
  height:30px;
  border-radius:100%;
  background:#CEA690;
  border:5px solid #CE8A65;
   }
.orejas3::before{
  margin:55px -9px;
   transform:rotate(21deg)
}
.orejas5::before{
  margin:-30px -12px;
   transform:rotate(-21deg)
}
.legs7{
  position:absolute;
  width:25px;
  height:50px;
  border-radius:30px ;
  background:#AA5E4C;
    margin:241px 643px;
  transform:rotate(33deg);
  animation:r1 .9s alternate infinite;
}
.legs7::before{
  content:"";
  position:absolute;
  width:40px;
  height:21px;
  border-radius:30px ;
  background:#AA5E4C;
    margin:-12px -12px;
  transform:rotate(21deg)
}
.legs9{
  position:absolute;
    width: 25px;
  height: 50px;
  background: #AA5E4C;
  border-radius: 30px;
  margin:219px 570px;
  transform:rotate(-12deg);
  animation:r3 .9s alternate infinite;
}
.legs9::before{
  content:"";
  display:block;
  width:40px;
  height:21px;
  border-radius:30px ;
  background:#AA5E4C;
  margin:-7px 0px
}
.legs12{
  position:absolute;
    width: 25px;
  height: 50px;
  background: #AD786B;
  border-radius: 30px;
  margin:21px 90px;
  transform:rotate(90deg);
  animation: r4 .9s alternate infinite;
}
.legs12::before{
  content:"";
  display:block;
  width:40px;
  height:21px;
  border-radius:30px ;
  background:#AD786B;
  margin:-7px 0px
}

.legs21{
  position:absolute;
  width:25px;
  height:50px;
  border-radius:30px ;
  background:#AD786B;
    margin:80px 70px;
  transform:rotate(-30deg);
  animation:r2 .9s alternate infinite;
}
.legs21::before{
  content:"";
  position:absolute;
  width:40px;
  height:21px;
  border-radius:30px ;
  background:#AD786B;
    margin:30px 3px;
  transform:rotate(-9deg)
}
.cola{
  position:absolute;
  width:121px;
  height:102px;
  border-radius:100%;
  border-bottom:21px solid #AD786B;
  margin:221px 600px;
   animation:rotar12 .9s alternate infinite;
}
@keyframes rotar{
  0%{transform:rotate(7deg)}
   100%{transform:rotate(-7deg)}
}
@keyframes rot{
  0%{transform:rotate(-12deg)}
   100%{transform:rotate(12deg)}
}
@keyframes rotar3 {
  0%{transform:rotate(132deg)}
   50%{transform:rotate(145deg)}
}
@keyframes rotar5 {
  0%{transform:rotate(121deg)}
   50%{transform:rotate(112deg)}
}
@keyframes sube{
  0%{ margin:70px 34px;}
   50%{ margin:65px 34px;}
}
@keyframes sube3{
  0%{  margin:73px 13px;}
   50%{  margin:70px 13px;}
}
@keyframes shake{
  0%{transform:scale(1)}
  50%{transform:scale(.90)}
  75%{transform:scale(1)}
 }

@keyframes r1 {
  0%{transform:rotate(33deg) translatey(0px) translatex(0px)}
   50%{transform:rotate(-12deg) translatey(-3px) translatex(-12px)}
}
@keyframes r2 {
  0%{transform:rotate(-30deg) translatey(0px) translatex(0px)}
   50%{transform:rotate(12deg) translatey(12px) translatex(-3px)}
}
@keyframes r3 {
  0%{transform:rotate(-9deg) translatey(0px) translatex(0px)}
   50%{transform:rotate(-12deg) translatey(9px) translatex(3px)}
}
@keyframes r4 {
  0%{transform:rotate(90deg) translatey(0px) translatex(0px)}
   50%{transform:rotate(70deg) translatey(-9px) translatex(-3px)}
}
@keyframes abre{
  0%{transform:scale(1)}
  50%{transform:scale(.7)}
}
@keyframes rotar12{
  0%{transform:rotate(12deg)}
   50%{transform:rotate(-12deg)}
}
@keyframes rotar21{
  0%{transform:rotate(24deg)}
   50%{transform:rotate(42deg)}
}
@-webkit-keyframes cierra{
 0%,25% {opacity:1;}
 45% {opacity:0;}
 50%, 65%,75%,85%,95%,100%{opacity:1;}

}

@keyframes rodar{
  0%{transform:translatey(-3px)}
   100%{transform:translatey(3deg)}
}
@keyframes shakes {
  2% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  4% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  6% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  8% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  10% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  12% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  14% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  16% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  18% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  20% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  22% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  24% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  26% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  28% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  30% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  32% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  34% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  36% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  38% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  40% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  42% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  44% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  46% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  48% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  50% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  52% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  54% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  56% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  58% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  60% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  62% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  64% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  66% {
    transform: translate(1px, 0px) rotate(0.5deg); }
  68% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  70% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  72% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  74% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  76% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  78% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  80% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  82% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  84% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  86% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  88% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  90% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  92% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  94% {
    transform: translate(0px, 0px) rotate(0.5deg); }
  96% {
    transform: translate(1px, 1px) rotate(0.5deg); }
  98% {
    transform: translate(0px, 1px) rotate(0.5deg); }
  0%, 100% {
    transform: translate(0, 0) rotate(0); } }