Beautifull rope jumping robot css animation at mapbox.com

.robot{
 width: 300px;
 -webkit-animation: rainbow 4s steps(59) infinite;
}

.animate {
  -webkit-transition:all .125s;
     -moz-transition:all .125s;
      -ms-transition:all .125s;
          transition:all .125s;
  }

.robot-animation {
  background:url(img/footerguy-jump.jpg) no-repeat 0 0;
  background-size: auto 100%;
  height: 0;
  padding-bottom: 100%;
  transition: none;
  -webkit-animation: walk 2s steps(59) infinite;
     -moz-animation: walk 2s steps(59) infinite;
       -o-animation: walk 2s steps(59) infinite;
          animation: walk 2s steps(59) infinite;
  -webkit-animation-play-state:running;
     -moz-animation-play-state:running;
       -o-animation-play-state:running;
          animation-play-state:running;
}

@-webkit-keyframes walk {
   from { background-position: 0 0; }
     to { background-position: 100% 0; }
}

@-moz-keyframes walk {
   from { background-position: 0 0; }
     to { background-position: 100% 0; }
}

@-o-keyframes walk {
   from { background-position: 0 0; }
     to { background-position: 100% 0; }
}

@keyframes walk {
   from { background-position: 0 0; }
     to { background-position: 100% 0; }
}

@-webkit-keyframes rainbow {
   from { -webkit-filter:hue-rotate(10deg); }
     to { -webkit-filter:hue-rotate(360deg); }
}

@keyframes rainbow {
 from {
    -webkit-filter:hue-rotate(10deg);
            filter:hue-rotate(10deg);
    }
  to {
    -webkit-filter:hue-rotate(360deg);
            filter:hue-rotate(360deg);
    }
}

mapbox.com