* {
  margin: 0;
  padding: 0;
}

body {
  background:blue;
  height: 100%;
}

#robot {
  position: relative;
  height: 78vh;
  width: 20vh;
  margin-left:10%;
  -webkit-animation: robot 0.7s infinite ease-in-out;
          animation: robot 0.7s infinite ease-in-out;
  z-index: 2;
  margin-top:4%;
}

.voila {
  margin-left:5%;
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;    
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-color:blue; left:0px; top:0px;}
    25%  {background-color:blue; left:800px; top:0px;}
    50%  {background-color:blue; left:800px; top:0px;}
    75%  {background-color:blue; left:0px; top:0px;}
    100% {background-color:blue; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:blue; left:0px; top:0px;}
    25%  {background-color:blue; left:800px; top:0px;}
    50%  {background-color:blue; left:800px; top:0px;}
    75%  {background-color:blue; left:0px; top:0px;}
    100% {background-color:blue; left:0px; top:0px;}
}

#robot div {
  position: absolute;
  -webkit-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
          transform-origin: 50% 0;
}
#robot .r div {
  background: black;
}
#robot .l div {
  background:black;
}
#robot .leg.r, #robot .arm.l {
  -webkit-animation: trans 0.7s 0.35s infinite linear;
          animation: trans 0.7s 0.35s infinite linear;
}
#robot .leg.l, #robot .arm.r {
  -webkit-animation: trans 0.7s infinite linear;
          animation: trans 0.7s infinite linear;
}
#robot .head {
  top: 10vh;
  left: 5vh;
  width: 9vh;
  height: 10vh;
  margin: 0 auto;
  -webkit-transform-origin: 20% 80%;
      -ms-transform-origin: 20% 80%;
          transform-origin: 20% 80%;
  -webkit-animation: head 0.7s infinite linear;
          animation: head 0.7s infinite linear;
}
#robot .arm {
  left: 5vh;
  top: 20.5vh;
  width: 8vh;
  height: 5.5vh;
}
#robot .arm div {
  top: 100%;
  left: 0;
  width: 100%;
  height: 10vh;
  box-sizing: border-box;
  -webkit-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
          transform: rotate(5deg);
  -webkit-animation: arms1 0.7s infinite linear;
          animation: arms1 0.7s infinite linear;
}
#robot .arm div div {
  -webkit-animation: arms2 0.7s infinite linear;
          animation: arms2 0.7s infinite linear;
}
#robot .arm.l div {
  -webkit-animation-delay: -0.35s;
          animation-delay: -0.35s;
}
#robot .leg {
  top: 45vh;
  left: 5vh;
  width: 8vh;
  height: 4vh;
}
#robot .leg div {
  width: 100%;
  height: 15vh;
  top: 100%;
  -webkit-animation: legs1 0.7s infinite linear;
          animation: legs1 0.7s infinite linear;
}
#robot .leg div div {
  -webkit-animation: legs2 0.7s infinite linear;
          animation: legs2 0.7s infinite linear;
}
#robot .leg.r div {
  -webkit-animation-delay: -0.35s;
          animation-delay: -0.35s;
}

.shadow {
  position: relative;
  width: 22vh;
  height: 3vh;
  margin-left:10%;
  border-radius: 50%;
  background:black;
  -webkit-animation: shadow 0.7s infinite linear;
          animation: shadow 0.7s infinite linear;
  z-index: 1;
}

/************************************************************************************/
@-webkit-keyframes robot {
  0%,         50%,    100% {
    -webkit-transform: translateY(0vh) rotate(7deg);
            transform: translateY(0vh) rotate(7deg);
  }
  15%,    65% {
    -webkit-transform: translateY(-4vh) rotate(5deg);
            transform: translateY(-4vh) rotate(5deg);
  }
}
@keyframes robot {
  0%,         50%,    100% {
    -webkit-transform: translateY(0vh) rotate(7deg);
            transform: translateY(0vh) rotate(7deg);
  }
  15%,    65% {
    -webkit-transform: translateY(-4vh) rotate(5deg);
            transform: translateY(-4vh) rotate(5deg);
  }
}
@-webkit-keyframes head {
  0%, 100% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  25%, 75% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes head {
  0%, 100% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  25%, 75% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes trans {
  0%,100% {
    -webkit-transform: translateX(0vh);
            transform: translateX(0vh);
  }
  50% {
    -webkit-transform: translateX(3vh);
            transform: translateX(3vh);
  }
}
@keyframes trans {
  0%,100% {
    -webkit-transform: translateX(0vh);
            transform: translateX(0vh);
  }
  50% {
    -webkit-transform: translateX(3vh);
            transform: translateX(3vh);
  }
}
@-webkit-keyframes arms1 {
  0%, 100% {
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
  }
  50% {
    -webkit-transform: rotate(-70deg);
            transform: rotate(-70deg);
  }
}
@keyframes arms1 {
  0%, 100% {
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
  }
  50% {
    -webkit-transform: rotate(-70deg);
            transform: rotate(-70deg);
  }
}
@-webkit-keyframes arms2 {
  0%, 100% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  50% {
    -webkit-transform: rotate(-100deg);
            transform: rotate(-100deg);
  }
}
@keyframes arms2 {
  0%, 100% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  50% {
    -webkit-transform: rotate(-100deg);
            transform: rotate(-100deg);
  }
}
@-webkit-keyframes legs1 {
  0%, 100% {
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  40% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}
@keyframes legs1 {
  0%, 100% {
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  40% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}
@-webkit-keyframes legs2 {
  0%, 100% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  33% {
    -webkit-transform: rotate(150deg);
            transform: rotate(150deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes legs2 {
  0%, 100% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  33% {
    -webkit-transform: rotate(150deg);
            transform: rotate(150deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes shadow {
  0%,    50%,    100% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  25%,    75% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
}
@keyframes shadow {
  0%,    50%,    100% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  25%,    75% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
}


h1{
  text-align:center;
}