Alien animado en #CSS3

Quien diría que el código CSS3 facilitaría la vida de los animadores para web. En esta ocasión es el turno para un alien animado.

En el siguiente link pueden ingresar al sitio oficial de la codificación. A continuación se adjunta el código respectivo.

*HTML
---------------------------------------
<div id="wrap">
  <div id="aliens">
    <div class="body">
      <div class="eyes left"></div>
      <div class="eyes right"></div>
      <div class="mouse"></div>
    </div>
    <div class="arms left"></div>
    <div class="arms right"></div>
    <div class="legs left"></div>
    <div class="legs right"></div>
    <div class="halo-set">
      <div class="halo"></div>
      <div class="halo"></div>
      <div class="halo"></div>
      <div class="halo"></div>
      <div class="halo"></div>
    </div>
  </div>

</div>
---------------------------------------

*CSS3
---------------------------------------
$forecolor: #92cbd9;
$backcolor: #6294a0;

%pseudo {
  content: "";
  position: absolute;
}

@keyframes walk {
  25% {
    transform: translate3d(0, 2px, 0);
  }
  75% {
    transform: translate3d(0, -2px, 0);
  }
}


@keyframes twinkle {
  90% {
    transform: scale3d(1, 1, 1);
  }
  95% {
    transform: scale3d(1, 0.1, 1);
  }
}


@keyframes walk-right-hand {
  25% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(10deg);
  }
}


@keyframes walk-left-hand {
  25% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
}


@keyframes walk-left-foot {
  25% {
    transform: rotate(25deg);
  }
  75% {
    transform: rotate(-25deg);
  }
}


@keyframes walk-right-foot {
  25% {
    transform: rotate(-25deg);
  }
  75% {
    transform: rotate(25deg);
  }
}

body {
  background: #646464;
}

#wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#aliens {
  position: relative;
  width: 100px;
  height: 180px;
  animation: walk 1s linear infinite;
  &:before {
    @extend %pseudo;
    left: -20px;
    top: -20px;
    width: 120px;
    height: 120px;
    border: 10px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    z-index: 99;
  }
}

.body {
  position: absolute;
  top: 49px;
  width: 100px;
  height: 80px;
  background: $forecolor;
  &:before {
    @extend %pseudo;
    top: -50px;
    width: 100px;
    height: 100px;
    background: $forecolor;
    border-radius: 50%;
    clip: rect(0, 100px, 50px, 0);
  }
  &:after {
    content: '';
    position: absolute;
    top: 54px;
    width: 100px;
    height: 50px;
    background: $forecolor;
    border-radius: 50%;
    clip: rect(25px, 100px, 50px, 0);
  }
}

.eyes {
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  background: $backcolor;
  border-radius: 50%;
  animation: twinkle 5s infinite;
  &.left {
    left: 30px;
  }
  &.right {
    left: 70px;
  }
}

.mouse {
  position: absolute;
  top: 20px;
  left: 45px;
  width: 30px;
  height: 20px;
  border: 5px solid $backcolor;
  border-radius: 50%;
  box-sizing: border-box;
  clip: rect(10px, 30px, 20px, 0);
}

.arms {
  position: absolute;
  top: 80px;
  width: 80px;
  &:before {
    @extend %pseudo;
    top: 0;
    width: 80px;
    height: 200px;
    border: 10px solid #92cbd9;
    border-top-width: 20px;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  &:after {
    @extend %pseudo;
    top: 33px;
    width: 12px;
    height: 12px;
    background: #92cbd9;
    border-radius: 50%;
    clip: rect(6px, 12px, 12px, 0);
  }
  &.left {
    left: -30px;
    animation: walk-left-hand 1s linear infinite;
    &:before {
      clip: rect(0, 35px, 40px, 0);
    }
    &:after {
      left: 8px;
    }
  }
  &.right {
    right: -30px;
    animation: walk-right-hand 1s linear infinite;
    &:before {
      clip: rect(0, 80px, 40px, 45px);
    }
     &:after {
      right: 8px;
    }
  }
}

.legs {
  position: absolute;
  top: 140px;
  width: 20px;
  &:before {
    @extend %pseudo;
    width: 0;
    border: 10px solid transparent;
    border-top: 150px solid $forecolor;
    clip: rect(0px, 20px, 30px, 0);
  }
  &:after {
    @extend %pseudo;
    top: 20px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: $forecolor;
    border-radius: 50%;
    clip: rect(8px, 16px, 16px, 0);
  }
  &.left {
    left: 20%;
    animation: walk-left-foot 1s linear infinite;
  }
  &.right {
    right: 20%;
    animation: walk-right-foot 1s linear infinite;
  }
}

.halo {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  &:nth-child(1) {
    width: 30px;
    height: 30px;
    top: 10px;
    right: 10px;
  }
  &:nth-child(2) {
    width: 15px;
    height: 15px;
    bottom: 35px;
    right: 30px;
  }
  &:nth-child(3) {
    width: 13px;
    height: 13px;
    bottom: 50px;
    right: 5px;
  }
  &:nth-child(4) {
    width: 10px;
    height: 10px;
    bottom: 40px;
    right: 18px;
  }

}
---------------------------------------