#armadillo {
  display: block;
  position: fixed;

 /* Initial position */
top: 225px; 
left: 175px;
  
  /* Animate */
  animation-name: move-south, turn-east, move-east, turn-north, move-north,
    turn-west, move-west, turn-south;
  animation-delay: 0s, 4s, 5s, 9s, 10s, 14s, 15s, 19s;
  animation-duration: 4s, 1s, 4s, 1s, 4s, 1s, 4s, 1s;
  animation-fill-mode: forwards;
}

@keyframes move-south {
  from { 
    top: 225px; 
  }
  to {
    top: 425px; 
  }
}

@keyframes move-east {
  from {
    left: 175px;
  }
  to {
    left: 375px;
  }
}

@keyframes move-north {
  from {
    top: 425px;
  }

  to {
    top: 225px;
  }
}

@keyframes move-west {
  from {
    left: 375px;
  }

  to {
    left: 175px;
  }
}

@keyframes turn-south {
  from {
    transform: rotate(90deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes turn-east {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-90deg);
  }
}

@keyframes turn-north {
  from {
    transform: rotate(-90deg);
  }

  to {
    transform: rotate(-180deg);
  }
}

@keyframes turn-west {
  from {
    /* At this point, silently change from -180deg to 180deg to avoid a big turn at the end */
    transform: rotate(180deg);
  }

  to {
    transform: rotate(90deg);
  }
}