Animer des bulles vers le haut en permanence avec CSS3?
Voir l'image suivante:
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!
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
Vous devez vous connecter pour publier un commentaire.
Ici est un pur CSS démonstration (adapté à partir de ce tutoriel), qui s'appuie sur la
animation
de la propriété. Mise à jour: Grâce à TonioElGringo les bulles maintenant aussi se déplacer latéralement, même si l'animation est rythmique, pas au hasard:ce qui est beau.
Juste un peu joué avec elle à ajouter les méandres (juste un infini suppléant animation margin-left): jsfiddle.net/zr7sb/10 (je n'ai pas ajouter la prise en charge en plus de webkit, il suffit de copier-coller tout 3 fois...)
Beau travail!! J'ai mis à jour la réponse.
Finalement, j'ai eu à travailler avec IE10. Voir la démo ici: jsfiddle.net/p5gpx/629
OriginalL'auteur Asad Saeeduddin
Une très belle exemple de travail j'ai créé avec de la pure CSS : http://demo.web3designs.com/animated-bubble-upwards-continuously-with-pure-css.htm
CSS:
OriginalL'auteur Dhiraj