I am sharing another example of pure CSS experimental work to create animated bubbles in water with wave or ripple effects without using any image or JavaScript. These animated bubbles are also with popping effect. All these Lab elements are created and animated by Pure CSS.

Previously, I had shared “Animated bubbles upwards continuously with pure CSS” with same concept. At that time, I had used a simple image for the conical flask with half filled liquid. But, in this tutorial I have created all these elements by CSS.

css-Water-Ripple-Effect-and-Animated-bubbles


If you were a Chemistry student or visited any Chemical lab than, you can easily identify these objects like, Flask, liquids and gas bubbles.

HTML & CSS – For Glass Flask

At first, We will create a Flask. Round bottom flask includes an opening, a neck and having spherical bottoms. For Creating a realistic Glass effect in Flask, I have used some CSS Gradient with alpha.

Html is,

<div class="css-jar">
 <div class="flask-mouth"></div>
 <div class="flask-neck"></div>
 <div class="flask-base"></div>
</div>

The CSS of Flask is,

.css-jar {
  position: relative;
  width: 195px;
  margin: 49px auto 0;
  text-align: center;
  transform:scale(2.5);
}
.css-jar .flask-mouth {
  background: radial-gradient(circle at 50% 55%, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4));
  width: 40px;
  height: 10px;
  margin: 0 auto -1px;
  border-right: 1px solid rgb(43, 130, 255);
  border-left: 1px solid rgb(43, 130, 255);
  border-radius: 19px;
  -o-border-radius: 19px;
  -ms-border-radius: 19px;
  -webkit-border-radius: 19px;
  -moz-border-radius: 19px;
}
.css-jar .flask-neck {
  width: 34px;
  height: 46px;
  margin: 0 auto -7px;
  z-index: 7;
  position: relative;
  border-right: 1px solid rgb(43, 130, 255);
  border-left: 1px solid rgb(43, 130, 255);
  background: radial-gradient(circle at 50% 55%, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4));
}
.css-jar .flask-base {
  margin: auto;
  width: 117px;
  height: 97px;
  border: 1px solid rgb(43, 130, 255); border-top:0 solid #FFF;
  border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 5;
  background: radial-gradient(circle at 50% 55%, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4));
}

Now, We have created an empty Round Bottom Glass Flask. We have to fill it with liquid.

For Creating Liquid / Water with Waves of Ripples

For Creating realistic water we have to add the ripple or wave effects on the top of masked liquid layer. For This animated liquid effect, I had used two elements. First for water or liquid and second for waves or  ripples.

Html part of animated liquid is,

<div class="css-liquid"></div>
<div class="css-wave"></div>

We will append this html in the div with class “flask-base” for creating half filled flask. Now, the updated HTML is,

<div class="css-jar">
  <div class="flask-mouth"></div>
  <div class="flask-neck"></div>
  <div class="flask-base">
  <div class="css-liquid"> </div>
  <div class="css-wave"></div>
  <div class="css-wave"></div>
  <div class="css-bubble"></div>
  <div class="css-bubble"></div>
  </div>
  <div class="css-bubble"></div>
  <div class="css-bubble"></div>
</div>

For creating animated wave effects in liquid, our updated CSS is,

.css-jar .css-liquid {
  height: 39px;
  background-color: rgb(53,238,251);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.css-jar .css-wave {
  width: 58px;
  height: 19px;
  position: absolute;
  background-color: rgb(53,238,251);
  left: 0;
  top: 56px;
  animation: css-wave 1.15s linear 1.15s infinite alternate;
  -o-animation: css-wave 1.15s linear 1.15s infinite alternate;
  -ms-animation: css-wave 1.15s linear 1.15s infinite alternate;
  -webkit-animation: css-wave 1.15s linear 1.15s infinite alternate;
  -moz-animation: css-wave 1.15s linear 1.15s infinite alternate;
  border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}
.css-jar .css-wave + .css-wave {
  left: auto;
  right: 0;
}

For Creating Animated Bubbles

Now, it’s turn to create the animated bubbles. For this, we have created a div with class “css-bubble”. For this new “Bubble” element I had written some CSS with animation.

.css-jar .flask-base .css-bubble {
  left: 15px;
  top: 49px;
  animation: css-bounce 2.65s linear 0s infinite alternate;
  -o-animation: css-bounce 2.65s linear 0s infinite alternate;
  -ms-animation: css-bounce 2.65s linear 0s infinite alternate;
  -webkit-animation: css-bounce 2.65s linear 0s infinite alternate;
  -moz-animation: css-bounce 2.65s linear 0s infinite alternate;
}
.css-jar .flask-base .css-bubble + .css-bubble {
  left: 73px;
  top: 39px;
  animation-duration: 3.45s;
  -o-animation-duration: 3.45s;
  -ms-animation-duration: 3.45s;
  -webkit-animation-duration: 3.45s;
  -moz-animation-duration: 3.45s;
}

CSS of all Animations

All the animations are made with advanced CSS 3.

@keyframes css-wave {
 from {
 transform: translateX(97px);
 }
 to {
 transform: translateX(-97px);
 }
}

@keyframes css-bounce {
 0% {
 transform: translate(5px, 15px);
 }
 50% {
 transform: translate(0, -15px);
 }
 100% {
 transform: translate(-5px, -36px);
 opacity: 1;
 }
}

@keyframes css-buble {
 0% {
 transform: translate(3px, 10px);
 }
 25% {
 transform: translate(0, 0px);
 }
 50% {
 transform: translate(-3px, -24px);
 }
 75% {
 transform: translate(0, -49px);
 opacity: 1;
 }
 100% {
 transform: translate(3px, -97px);
 opacity: 0;
 }
}

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.

That’s it!

I hope you enjoyed this article and the techniques I used. Please share it by clicking on the share bar below.

If you have any more suggestions to be added , feel free to comment below.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 can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsHTMLMobile Web TechnologyTutorialsadvance web technology,animated aquarium,animated bubbles,Animated Water,animation delay,animation direction,aquarium,bubble,Bubble css,bubbles,configurable settings,CSS,CSS 3,CSS 4,css animation,css bubble,css bubbles,css game,CSS Glass,css infinite animation,css loop animation,css namespaces,css3,graphical user interface,mobile,transparent background image,visual transition,Water ripple CSS,Water wave CSSI am sharing another example of pure CSS experimental work to create animated bubbles in water with wave or ripple effects without using any image or JavaScript. These animated bubbles are also with popping effect. All these Lab elements are created and animated by Pure CSS. Previously, I had shared 'Animated bubbles upwards continuously...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.