Eu criei três imagens .png de balões de ar quente. Cada um tem tamanhos diferentes, de modo que eles emitem a ideia de "profundidade". Qual é a melhor maneira de codificar esses PNGs para que eles se movam e flutuem em volta do meu contêiner como balões de ar quente?

Eu tentei o seguinte código do site do Spritely que eu adaptei da seguinte forma:

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

Eu coloquei esse código para os outros dois balões (# balão1) e (balão2) e, em seguida, coloquei seus respectivos DIVs em um contêiner DIV chamado "#sky"

Eu imaginei que colocar a velocidade para 10000 iria fazê-los flutuar muito mais devagar.

No entanto, não está funcionando da maneira que eu esperava. Primeiro, uma vez carregada a página, todos os três balões (que eu posicionei originalmente em três lugares separados ao longo do container) imediatamente flutuam para o mesmo ponto exato, e eles não parecem se mover muito daquele ponto depois.

Existe uma maneira mais fácil e mais eficaz de fazer com que minhas três imagens de balões se movam aleatoriamente e realisticamente pelo meu contêiner?

Muito obrigado se você é capaz de fornecer alguma ajuda!