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. Animated bubbles upwards continuously with pure 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… view demo

 

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.

You may also like:

You may also like:

You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsMobile Web TechnologyTutorialsadvance web technology,animated bubbles,animation delay,animation direction,background color,Background stripes,border color,bubble,bubbles,colon notation,color palette,colored boxes,configurable settings,core code,cross browser compatibility,CSS,CSS 3,CSS 4,css animation,css bubble,css bubbles,CSS code,CSS framework,css hacks,css namespaces,css opacity,CSS properties,css property,css rules,css selector,CSS technique,css transform,CSS trick,css3,css3 box shadow,CSS3 keyframe animation,CSS3 transitons,div id,doctype html,experimental work,fancy transition effect,grid,grid system,html and xhtml,html basics,html5,interactive web applications,internet explorer 10,javascript,key frames,keyframe animation,line tag,mobile,notification bubble,page elements,paragraph text,popping bubble,random transition,rounded corners,smooth transitions,span class,speech bubble,style,technology,the bubbles,tips and tricks,transition effects,transparent background,transparent background image,visual transition,webkitHere 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...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.