style.css

body {
  margin: 0;
}
#pics {
  position: relative;
  overflow-x: hidden;
}
img {
  position: absolute;
  height: 177px;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in;
}
img.fade-in {
  opacity: 1;
}
.nodebot{
  z-index:2;
  opacity: 1;
  width:100px;
  height:100px;
  background-color: #F8E01E;
  position:fixed;
  bottom: 30px;
  right: 30px;
  box-shadow: 0 0 1em #000;
}
.nodebot .icon{
  position:absolute;
  bottom:8%;
  right:8%;
  width:45.6%;
  height:50%;
}
.nodebot .icon * {
  background: #2e2e2c;
}
.nodebot .icon .bobble{
  width:12.5%;
  height:12%;
  border-radius: 100%;
  margin:5% auto -3.8%;
}
.nodebot .antenna{
  width:6%;
  margin:0 auto 4%;
  height:16.5%;
  border-bottom-left-radius: 80% 30%;
  border-bottom-right-radius: 80% 30%;
}
.nodebot .head{
  width: 100%;
  height: 48.5%;
  border-top-left-radius: 15% 25%;
  border-top-right-radius: 15% 25%;
  position:relative;
}
.nodebot .head .eye{
  width:18%;
  height:33.5%;
  margin:0 18.2%;
  border-radius: 100%;
  background-color: #F8E01E;
  display: inline-block;
  position:absolute;
  top:26%;
  left: 0px;
  -webkit-animation: blink 5s 2s infinite;
  animation: blink 5s 2s infinite;
}
.nodebot .eye.right{
  left: auto;
  right:0;
}
.nodebot .head .eye.blink {
  height: 6%;
  top:36%;
  border-radius: 0;
  background-color: #000;
}
.nodebot .neck{
  border-radius: 20px;
  width: 69%;
  height: 6%;
  margin: 3.6% auto 0;
}
.nodebot .neck:last-child{
  width: 48%;
}

@-webkit-keyframes blink {
  0%, 4%, 8%, 100%{
    height:33.5%;
    border-radius: 100%;
    background-color: #F8E01E;
    top:26%;
  }
  2%, 6% {
    height: 6%;
    top:36%;
    border-radius: 0;
    background-color: #000;
  }
}

@keyframes blink {
  0%, 4%, 8%, 100%{
    height:33.5%;
    border-radius: 100%;
    background-color: #F8E01E;
    top:26%;
  }
  2%, 6% {
    height: 6%;
    top:36%;
    border-radius: 0;
    background-color: #000;
  }
}