Robot fetching gift loading animation

HTML

<div id="track">
  <div id="body">
    <div id="eye" class="body-part">
      <div id="pupil"></div>
    </div>
    <div id="arm" class="body-part">
      <div id="hand" class="body-part"></div>
    </div>
    <div id="leg-left" class="body-part"></div>
    <div id="leg-right" class="body-part"></div>
  </div>
  <div id="gift">
    <div id="boxtop">
      <div id="ribbons"></div>
    </div>
  </div>
</div>

CSS

body {
  background-color: #333;
}
#track {
  background-color: #EEE;
  width: 600px;
  height: 131px;
  border: 10px solid #F3F3F3;
  z-index: 0;
  position: relative;
}
@keyframes body {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 440px;
  }
}
#body {
  animation: 10s linear 0s infinite normal both running body;
  width: 60px;
  height: 100px;
  background-color: #CCC;
  border: 3px solid #333;
  box-sizing: border-box;
  position: relative;
  border-radius: 0 16px 16px 16px;
}
.body-part {
  position: absolute;
  border: 3px solid #333;
  box-sizing: border-box;
}
#eye {
  width: 16px;
  height: 16px;
  border-radius: 11px;
  top: 10px;
  right: 5px;
  background-color: #FAFAFA;
}
@keyframes pupil {
  0%, 65% {
    top: 3px;
    right: 0px;
  }
  80%, 100% {
    top: 3px;
    right: 2px;
  }
}
#pupil {
  animation: 1600ms ease-in-out infinite alternate both running pupil;
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  top: 3px;
  right: 0px;
  background-color: #333;
}
@keyframes arm {
  0% {
    transform: rotate(-80deg);
  }
  100% {
    transform: rotate(-85deg);
  }
}
#arm {
  animation: 333ms ease-in-out 0s infinite alternate both running arm;
  width: 15px;
  height: 55px;
  background-color: #AAA;
  top: 45px;
  left: 18px;
  transform-origin: 50% 0;
  border-radius: 8px 4px 0 0;
}
#hand {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #AAA;
  top: 40px;
  left: -5px;
}
@keyframes leg {
  0% {
    left: 15px;
  }
  100% {
    left: 30px;
  }
}
#leg-left,
#leg-right {
  animation: 333ms ease-in-out 0s infinite alternate both running leg;
  width: 20px;
  height: 40px;
  background-color: #AAA;
  top: 88px;
  left: 15px;
}
#leg-left {
  animation-delay: 333ms;
  z-index: -1;
}
#gift {
  position: absolute;
  right: 20px;
  top: 40px;
  width: 60px;
  height: 50px;
  border: 3px solid #A00893;
  border-radius: 0 0 8px 8px;
  z-index: -1;
}
#gift::after {
  content: "";
  position:...