.contain-alien
 .head
 .top
 .bend

body {
  background: #333333;
}

.contain-alien {
  position: relative;
  margin: 150px auto;
  width: 70px;
}

.head {
  position: absolute;
  background: gray;
  border-radius: 50%;
  width: 70px;
  height: 50px;
}

.head:before {
  position: absolute;
  top: 2px;
  left: -3px;
  display: block;
  background: gray;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  content: '';
}

.head:after {
  position: absolute;
  top: 2px;
  left: 53px;
  display: block;
  background: gray;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  content: '';
}

.top {
  position: absolute;
  top: -28px;
  left: 33px;
  -webkit-transform-origin: bottom right;
  -webkit-transform: rotate(100deg);
  border-radius: 0 0 50px 50px;
  background: gray;
  width: 4px;
  height: 17px;
  -webkit-animation: antenna 1s forwards;
}

.top:after {
  position: absolute;
  top: -17px;
  left: -5px;
  display: block;
  background: gray;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  content: '';
}

.top:before {
  position: absolute;
  top: -27px;
  left: -15px;
  display: block;
  border: 2px dotted gray;
  border-radius: 50%;
  opacity: 0;
  width: 31px;
  height: 31px;
  content: '';
  -webkit-animation: load 8ms infinite;
  -webkit-animation-delay: 1s;
}

.bend {
  position: absolute;
  top: -13px;
  left: 34px;
  -webkit-transform-origin: bottom right;
  -webkit-transform: rotate(10deg);
  background: gray;
  width: 4px;
  height: 15px;
  -webkit-animation: straight 1s forwards;
}

@-webkit-keyframes antenna {
  100% {
    -webkit-transform: translateX(1px) rotate(0deg);
  }
}

@-webkit-keyframes straight {
  to {
    -webkit-transform: rotate(0deg);
  }
}

@-webkit-keyframes load {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
    -webkit-transform: rotate(360deg);
  }
}

// Chrome & Safari eyeballs