Animer des bulles vers le haut en permanence avec CSS3?

Voir l'image suivante:

http://i.imgur.com/3vTrB.png

Voir ceux des cercles transparents dans le fond? Ce que je veux faire est de rendre animer de bas en haut, manuellement, puis sautez vers le bas (hors écran) et re-démarrer l'animation. Les cercles sont simples <span> éléments avec border-radius à faire de l'effet cercle.

Est-ce possible de le faire avec CSS3, ou vais-je avoir besoin de javascript pour qui? J'aimerais aussi, si possible, déplacer les cercles au hasard latéralement dans une gamme X tout en se déplaçant vers le haut. J'imagine que le hasard aurait besoin de javascript?

Si possible, je serais heureux de recevoir vos suggestions/idées quant à la façon de le faire. Si pas possible avec les CSS, le Javascript dans les bibliothèques est la bienvenue!

Pourriez-vous s'il vous plaît mettre en place un jsFiddle pour les essais?
En ce moment je n'ai que le code HTML et CSS pour "statique" des bulles, je n'ai pas ajouté d'une animation encore.
Oui, c'est bien. Juste pour que nous puissions avoir un point de départ.

OriginalL'auteur qwerty | 2012-12-19