QUICK TIP - 1 Cool Bubble Floating Effect – Detailed Explanations With CSS

0 6,713
1 Cool Bubble Floating Effect – Detailed Explanations With CSS- Today, we would like to share with you how to make a pretty nice effect that is simple like other CSS tutorials on our website .  
Hi, there must have been some free time surfing the web, you have seen some pages with beautiful glitter animation effects without knowing how they do … , some websites have animation effects especially like  species-in-piecesmikimottes, or a page we find most interesting is  7up . Thus, we would like to show you how to apply the CSS technique on your website or project. Let’s start work together!

Idea – Bubble Floating Effect

For those who are not good at front-end,  first looking the bubbles effect will make you feel that it seems quite complicated and must have a huge JavaScript code platform to be able to do it.
But through researching as well as referencing a number of sources, you can realise that it’s actually not too difficult to conduct without the JavaScript knowledge.
Therefore, we only need a few SVG cards to draw bubbles and animation CSS to make the motion can build smooth and delicious bubbles. Let’s talk a bit about SVG and animations via some basic knowledge about SVG.

What Is SVG?

SVG (Scalable Vector Graphics), is an image format (similar to JPG, PNG, … that we often use) uses XML structure to display images in vector form. Because it is a vector image, we can display, scale (scale) freely without losing image quality. An advantage of SVG is that all elements and attributes of those elements can be animate.

Animation In CSS

The animation attribute in CSS determines a motion of a tag or an image, which is a combination of attributes: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction.


Firstly, we need to build HTML structure. The method is the same with some tutorials CSS as we practice together. Therefore, this tutorial also have 2 main parts. So, the first one is HTML and other is CSS.


In this code, we focus on how to make the bubbles. First we need a few tags to define bubbles, we need two types of bubbles big and small to make the effect look more realistic and vivid. So, you can look the code below: In that class  bubbles-large contains big bubbles with a border width of 7 (  stroke-width = 7) and  bubbles-small contains small bubbles with a border width of 4. To apply 2 separate animations to the 2 bubble types, we need to add transform properties to each bubble block we use. 
Tags  <g> in SVG are used similarly to tags  <div> in HTML, we need to wrap the bubble blocks into a larger block (here are 2 tags  <g> with classes  bubbles-large and  bubbles-small)
Next is the CSS section Here we will use  @keyframes to define Meaning complex movements, then use them via properties  animation in the CSS. So, if you want more different size of bubbles you can add more tags like above to define these bubbles as your expectation.


Now this part will help you to add more properties for these tag g to create different sized bubbles. There are some key points that you need to focus on:
  • @keyframes up is responsible for creating vertical motion effects for bubbles, helping bubbles go up. When the bubble  0% (bottom), the opacity would be 0 (not shown), from  10% coming 90% to the current bubble and  100% the bubble will disappear  @keyframes wobbleliable effect horizontal scrolling help bubbles wobbling look like real bubbles.
  • To apply these effects to the bubble, we need the css for the tag groupand its subtags through nth-of-type. Next we will set the time for the effect, set  repeat it  infinite to the effect to repeat each bubble forever, as well as add a short period of time to delay between the bubbles floating.
  • Then, we will add  timing function ease-in-out to make the effect  wobble look more natural.As a final step, we just apply colorful textures and copy the bubble blocks and styles corresponding to the number of bubbles you want.



We ensure that up to this step you can learn and understand how to make the effect succesfully. This effect is so simple if you understand how it structures and how to add animations for it. Base on this knowledge, you can create more different effects as you expect. Thanks for your reading! You can reference more tutorials on our website to understand more how HTML & CSS work together. 

You may also like

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More