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…