• HTML
• CSS
• JS

HTML

<div id="sky">
  <div id="sea">
    <div id="bern"></div>
  </div>
</div>

<audio id="song">
  <source src="https://scummbar.com/mi2/DOTT/03%20-%20Busting%20The%20Candy%20Machine.mp3">
</audio>

CSS

/* Eliminamos márgenes y ponemos fondo de página negro */
html,body {
  margin:0;
  background:#000;
}

/* Bernard Bernoulli: Animación del personaje */
#bern {
  /* Tamaño de la viñeta individual */
  width:112px;
  height:156px;
  /* Cómo hay establecido un tamaño, centramos con margin:auto */
  margin:auto;  
  /* Cargamos el sprite (el repeat-x se puede omitir, por defecto se repite) */
  background:url(https://cdn.rawgit.com/ManzDev/cursos-assets/gh-pages/css3/bernard-sprite.png) repeat-x;
  /* Aplicamos la animación "walk": 0.8seg, 6 viñetas y repetimos infinitamente */
  animation:walk .8s steps(6) infinite;
  /* Posicionamos el personaje sobre el camino de madera */
  position:relative;
  bottom:34px;
}

/* Animación de personaje caminando: Simplemente mueve el sprite sheet hacia la izquierda, realizando el movimiento. */
@keyframes walk {
  /* Partimos de la primera viñeta del sprite sheet */
  0% { background-position:0 }
  /* El tamaño total de ancho del sprite. Es negativo para que no "camine" hacia atrás */
  100% { background-position:-672px }
}

/* Animación del cielo. Efecto "Parallax", va más lento que el mar. */
#sky {
  background:url(https://cdn.rawgit.com/ManzDev/cursos-assets/gh-pages/css3/monkey-sky.png) repeat-X;
  animation: movebg 9s linear infinite;
}

/* Animación del mar. */
#sea {
  background:url(https://cdn.rawgit.com/ManzDev/cursos-assets/gh-pages/css3/monkey-sea.png) repeat-x;
  animation: movebg 6s linear infinite;
  /* Posicionamos el mar, para que no solape al cielo */
  position:relative;
  top:145px;
  /* Pequeño degradado interior para suavizar el mar. Puede consumir muchos recursos */
  box-shadow:10px 10px 45px RGBA(0,0,0, 0.85) inset;
}

/* Animación para mover cielo y mar */
@keyframes movebg {
  0% { background-position:550px } 
  100% { background-position:0 }
}

/* OPCIONAL: Guybrush */
#gb {
  width:104px;
  height:150px;
  background:url(https://cdn.rawgit.com/ManzDev/cursos-assets/gh-pages/css3/monkey-guybrush.png) no-repeat;
  animation:gbwalk 1s steps(6) infinite;
  margin:auto;
  position:relative;
  top:34px;
  /* Ojo, muy costoso en rendimiento */
  /* filter:drop-shadow(5px 5px 5px #000); */
}

@keyframes gbwalk {
  0% { background-position:0 }
  100% { background-position:-624px }
}

JS

/* Play only from CodePen */
if (parent==top)    
document.getElementById('song').autoplay = true;
  
/*

Todo los creditos a su autor: 
https://www.emezeta.com/articulos/animar-personajes-con-animaciones-css

*/