Creé tres imágenes .png de globos aerostáticos. Cada uno tiene diferentes tamaños para que desprendan la idea de "profundidad". ¿Cuál es la mejor manera de codificar estos .png para que se muevan y floten alrededor de mi contenedor como globos de aire caliente?

He probado el siguiente código del sitio web de Spritely que adapté como tal:

$('#balloon1')
  .sprite({fps: 3, no_of_frames: 1})
  .spRandom({
      top: 70,
      left: 100,
      right: 200,
      bottom: 340,
      speed: 10000,
      pause: 3000
  });

Puse este código para los otros dos globos (# balloon1) y (# balloon2) y luego puse sus respectivos DIV en un contenedor DIV con la etiqueta "#sky"

Pensé que poner la velocidad a 10000 los haría flotar mucho más lento.

Sin embargo, no está funcionando como esperaba. En primer lugar, una vez que se carga la página, los tres globos (que posicioné originalmente en tres lugares separados a lo largo del contenedor) flotan inmediatamente en el mismo lugar exacto, y luego no parecen moverse mucho desde ese lugar.

¿Existe una forma más fácil y efectiva de hacer que mis tres imágenes de globo se muevan de forma aleatoria y realista por mi contenedor?

¡Muchísimas gracias si son capaces de proporcionar ayuda!