#armadillo-pen {
  display: block;
  position: fixed;  
  top: 40%;
  left: 0;
  height: 20%;
  width: 25%;
  z-index: -1;

  /* Animate */
  animation-name: move-right;
  animation-duration: 16s;
  animation-fill-mode: forwards;
  animation-timing-function: step-end; 
  animation-iteration-count: infinite;
}

#armadillo {
  display: block;
  position: relative;
  margin-top: -50px;

  /* Animate */
  animation-name: square-wave;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes move-right {
  0% {
    left: 0%;
  }

  25% {
    left: 25%;
  }

  50% {
    left: 50%;
  }

  75% {
    left: 75%;
  }

  100% {
    left: 0%;
  }
}

@keyframes square-wave {
  0% {
    left: 0%;
    top: 0%;
    transform: rotate(-90deg);
  }

  12.5% {
    left: 50%;
    top: 0%;
    transform: rotate(-90deg);
  }

  25% {
    left: 50%;
    top: 0%;
    transform: rotate(0deg);
  }

  37.5% {
    left: 50%;
    top: 100%;
    transform: rotate(0deg);
  }

  50% {
    left: 50%;
    top: 100%;
    transform: rotate(-90deg);
  }

  67.5% {
    left: 100%;
    top: 100%;
    transform: rotate(-90deg);
  }

  75% {
    left: 100%;
    top: 100%;
    transform: rotate(-180deg);
  }

  87.5% {
    left: 100%;
    top: 0%;
    transform: rotate(-180deg);
  }

  100% {
    left: 100%;
    top: 0%;
    transform: rotate(-90deg);
  }
}