Animated bubbles upwards continuously with pure CSS
Here is a pure CSS experimental work to create floating bubbles without using JavaScript. These animated bubbles are also with popping effect. All these animation is created by Pure CSS.
For our little demo, we use a simple image for the conical flask and then create the bubbles entirely with markup and CSS.
The HTML
<div id="beaker"> <span class="bubble"> <span class="glow"> </span> </span> </div>
With our bubbles all made, now we need them to act like bubbles. We could use JavaScript but that’s no fun. Just use CSS! There are a few things we need to animate. The vertical positioning is obvious, but we also want to scale the bubbles as they travel up. Lastly, we need to account for the “popping.” Take a look at bubbleFloat to see how we did it. In addition to making the bubbles float up, we also need to make the bubbles glow to give’em that radioactive look. Look at greenPulse to see how we did it.
The CSS
@keyframes greenPulse { 0% {box-shadow:0 0 30px #4bbec8} 50% {box-shadow:0 0 80px #4bbec8} 100% {box-shadow:0 0 30px #4bbec8} } div#beaker span.glow { width:100%; height:100%;background:#222; position:relative; display:block; border-radius:200px; animation:greenPulse 2s infinite; -webkit-animation:greenPulse 2s infinite; -moz-animation:greenPulse 2s infinite; -o-animation:greenPulse 2s infinite; } @keyframes bubbleUp { 0% {bottom:110px;-webkit-transform:scale(.9);opacity:0} 1% {bottom:110px;-webkit-transform:scale(.3);opacity:0} 30% {bottom:110px;-webkit-transform:scale(.8);opacity:1} 95% {bottom:545px;-webkit-transform:scale(.3);opacity:1} 99% {bottom:550px;-webkit-transform:scale(3);opacity:0} 100% {bottom:110px;-webkit-transform:scale(.9);opacity:0} } div#beaker span.bubble { background:#fff; width:80px; height:80px; position:absolute; display:block; left:110px; bottom:110px; border-radius:100px; background:-moz-radial-gradient(center 45deg, circle closest-corner, rgba(75,190,200,0), rgba(75,190,200,.1), rgba(75,190,200,.3), rgba(255,255,255,.7)); background:-webkit-gradient(radial, center center, 0, center center, 100, from(rgba(75,190,200,.2)), to(rgba(255,255,255,.7))); background:gradient(center 45deg, circle closest-corner, rgba(75,190,200,0), rgba(75,190,200,.1), rgba(75,190,200,.3), rgba(255,255,255,.7)); background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(9,133,167,0.1) 51%, rgba(9,133,167,0.3) 71%, rgba(9,133,167,.7) 100%); animation:bubbleUp 4s infinite ease-in-out; -webkit-animation:bubbleUp 4s infinite ease-in-out; -o-animation:bubbleUp 4s infinite ease-in-out; -moz-animation:bubbleUp 4s infinite ease-in-out; }
Now just rinse and repeat to create all our bubbles!
Browser Compatibility:
As we mentioned before, this technology is developed with CSS, so it is supported by almost all major browsers. it is possible that the syntax and behavior can be changed in future versions of browsers. Chrome and Safari requires the prefix -webkit- in css. For today, it is supported by next browsers:
- Chrome
- Firefox
- Safari
- IE 10+
- Opera
Important: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property.
Update
In this article, I had used CSS for bubbles only. I have created air bubbles in flash with animated water (ripple) of CSS. Please visit – Pure CSS Water Ripple Effect and Animated Bubbles
That’s it!
I hope you enjoyed this article and the techniques I used. Please share your comments and questions below! If you liked this article, please share it by clicking on the share bar below. I’d appreciate it…
Dhiraj kumar is an Information Technology graduate who loves learning new things. A very popular and colorful individual, he has a particular passion for people, blogs, and the use of technology for social progress. He spends the whole day sitting in front of the computer, making himself updated with the new updates in technologies going on around him. He has more than 15 years of experience in the field of Website designing and Accessibility. He has a strong hand in Flash animation, 2D and 3D Presentation, UI web softwares in Flash with Action Scripting 2.0 / 3.0, Video Presentations, Flash Presentations, HTML, CSS, JavaScript, jQuery, Photoshop, 3Ds Max, Maya etc. read more..ALSO, TO SAVE BOTH OF US SOME TIME, YOU SHOULD KNOW THAT: Currently, I am not available for any type of freelance projects. Follow @dhiraj_kumarHTML5, CSS3 & jQuery - Web Design / Development

Nice Tutorial…
Hey Rakesh,
I am glad you found this useful. Enjoy reading..
I typed this in character for character, didn’t work. so i copied and pasted, STILL didn’t work!!! This always happens to me when i try tutorials. I rarely get them to work.
Hey Paul, thanks for your comment. have you visited Demo (http://demo.web3designs.com/animated-bubble-upwards-continuously-with-pure-css.htm) ?
Great tutorial. It helps to write my own.
I haven’t tried it yet, but I will implement it with my next project.
Hey Zsolt, thanks for your comment. I’m glad you like my articles.
The Best Tutorial…
can we use some random images in the place of bubbles?….
Hey Vinay, I am glad you found this useful.
Yes, you can do it easily by calling images in background of bubbles.
amazing stuff sir! plz How can i make the bubbles to be so many? and how can i make them come from one point at the bottom and spread?
I typed in your tutorial again, this time using NotePad++, and it worked like a charm! But only one question about it, though:
How can i produce more than one bubble? I don’t see any reference to the amount of bubbles in the code, and i only get one bubble, but it least it works like it should.
Hey Dhiraj .
I like this very much. May i use it for my site?
Sure, Go ahead..
On line 7 there LOOKS TO BE a typo: there are double sharp # chars instead of one.
Thanks for your suggestion.. typo rectified!
Absolutely brilliant!
If i were to use this in two columns – side by side – is there a way to change how far each bubble goes in one column -vs- the other column. This would make them look independent of each other.
Thanks
Hi,
I can’t figure out how did you make the bubbles burst when they reach the top?
Laura