Underwater Bubble CSS3 Effect – animation

The ocean was always inspiring to me. As a web designer I wanted to recreate a pinch of this amazing experience that you find underwater. In this tutorial I would like to teach you how to code a swimming whale that makes bubbles. You can view this properly in every browser that supports CSS3 properties.

 

 

 

 

 

DEMO: http://yokowebdesign.co.uk/demo/whale_tutorial/

DOWNLOAD the files: http://yokowebdesign.co.uk/demo/whale_tutorial.rar

 —————————————————————

Want to own your little ocean ? Then follow the steps:

1. Click the link above titled “Download the files” and extract the file by right clicking and choosing the option extract.

2.Open the folder and open css and html file in text editor (e.g. notepad++).

3. Alter the code to suit your vision. (You may want to add different animals, plants and take an advantage of CSS3 goodness , e.g. animations, text-effects, 2D transforms, etc.) Who knows maybe you decide to build a little aquarium. 

————-————————————————–

EXPLANATION:

The underwater effect consists of a whale image and coded bubbles (HTML markup and CSS). There is also the image of ocean bottom and some typography.  

HTML – Bubble

<div id="beaker">
	<span class="bubble">
		<span class="glow"> </span>
	</span>
</div>

It does not do anything yet so we need to wake it up with some CSS. We need to animate the bubbles movement ( travelling up, glowing, pulsating and popping).

Here is some handy info on CSS3 properties and values:

CSS3 Transform – scale() Method influences the size of the bubble, depending on the parameters given for the width and the height. The value scale (2.3) transforms the width to be twice its original size (in our tutorial code there is nothing specified therefore no transformation of the width). The height 3 transforms three times its original size.

Opacity value set to 0 makes the object 100% transparent, value 0.5 makes the object half-transparent.

CSS3 Animation:  Specifying a CSS style inside the @keyframes rule creates the animation. The code below shows that at various moments the size of the bubbles changes (that creates pulsating effect) and that it travels up.

 CSS3 Transition – Timing-Function property specifies a transition effect with a slow start and end.

CSS – animation for floating bubble 

@-webkit-keyframes bubbleFloat
{
from
  {
    bottom: 110px;
    -webkit-transform: scale(.3);
    opacity: 0;
    -webkit-animation-timing-function: ease-in-out;
  }
1%
  {
    bottom: 110px;
    -webkit-transform: scale(.3);
    opacity: 0;
    -webkit-animation-timing-function: ease-in-out;
  }
30%
  {
    bottom: 110px;
    -webkit-transform: scale(.8);
    opacity: 1;
    -webkit-animation-timing-function: ease-in-out;
  }
95%
  {
    bottom: 545px;
    -webkit-transform: scale(.3);
    opacity: 1;
    -webkit-animation-timing-function: ease-in-out;
  }
99%
  {
    bottom: 550px;
    -webkit-transform: scale(3);
    opacity: 0;
    -webkit-animation-timing-function: ease-in-out;
  }
to
  {
    bottom: 110px;
    -webkit-transform: scale(.9);
    opacity: 0;
    -webkit-animation-timing-function: ease-in-out;
  }
}

CSS – animation for pulsating bubble

CSS3 Borders: The red pulse animation consists of a shadow that changes colour from light blue to white back a forth and shadow that gets thicker and thinner. The CSS3 Box-Shadow property is used to add shadow to objects ( box-shadow: 0 0 30px  #BED7E8;        values: right , bottom and smudging).                 

@-webkit-keyframes redPulse3
{
from { -webkit-box-shadow: 0 0 5px #BED7E8;}
50% { -webkit-box-shadow: 0 0 30px #89C0E8; }
to { -webkit-box-shadow: 0 0 5px #BED7E8;}
}

Our whale needs a lot of bubbles and to make things interesting we will make them differ in sizes and location. To do that we need to start with our HTML skeleton bubbles (each need their own unique names so that the values can be different as well). SEE? Beaker3 can feel pretty special. 

HTML – Beaker

<div id="beaker3">
	<span class="bubble3">
		<span class="glow3"> </span>
	</span>
</div>

 As you can see below the span of a class bubble3 properties describe the size, shape and location of this particular bubble. It also adheres to the name & duration of the animation it should activate.

The glow element is built the same way as the bubble element.

CSS – Beaker

div#beaker3
{
    height: 50px;
    position: relative;
   /* border: 2px solid blue;*/
}
div#beaker3 span.bubble3
{
    width: 60px;
    height: 60px;
    position: absolute;
    display: block;
    left: 100px;
    bottom: 70px;
    -webkit-border-radius: 160px;
    background: -webkit-gradient(radial, center center, 0, center center, 100, from(rgba(255,255,255,.2)), to(rgba(53,162,240,.2)));
    -webkit-animation-name: bubbleFloat;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
}

div#beaker3 span.glow3
{
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    -webkit-border-radius: 160px;
    -webkit-animation-name: redPulse3;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}
Creating a swimming whale animation is easy peasy. Setting the position to relative is important (so that the animation can fully function if there was just float: left then the whale would just rotate without swimming around).
CSS – Swimming Whale
div#humpback_whale2
{
    /*border: 1px solid green; */
    float: left;
    margin: -180px 0 0 160px;
    position:relative;
    animation:humpback_whale2 12s;
    -webkit-animation:humpback_whale2 12s; 
    -webkit-animation-iteration-count: infinite;

 /*   transform: rotate(25deg);
    -webkit-transform: rotate(25deg);  */
}
Just like the bubble effect our swimming whale requires setting up key frames. The code below is self explanatory. 
@keyframes humpback_whale2
{
  0%   { left:-70px; top:0px;}
  45%  { left:30px; top:-70px;
          transform: rotate(-10deg);
          -webkit-transform: rotate(-10deg);
          -webkit-animation-timing-function: ease-in-out;
        }
  60%  { left:20px; top:-10px;
          -webkit-animation-timing-function: ease-in-out;
        }
  75%  {  left:0px; top:0px;
          transform: rotate(5deg);
          -webkit-transform: rotate(5deg);
          -webkit-animation-timing-function: ease-in-out;
        }
  100% { left:-70px; top:0px;}
}

@-webkit-keyframes humpback_whale2 /*Safari and Chrome */
{
  0%   { left:-70px; top:0px;}
  45%  { left:30px; top:-70px;
          transform: rotate(-10deg);
          -webkit-transform: rotate(-10deg);
          -webkit-animation-timing-function: ease-in-out;
        }
  60%  { left:20px; top:-10px;
          -webkit-animation-timing-function: ease-in-out;
        }
  75%  {  left:0px; top:0px;
          transform: rotate(5deg);
          -webkit-transform: rotate(5deg);
          -webkit-animation-timing-function: ease-in-out;
        }
  100% { left:-70px; top:0px;}
}
I hope you enjoyed my first tutorial. You can share your thoughts in the comment section. Toodeloo! Yoko
 Pssssss … in the next entry I will share (explain) secret how I made my diver swim.

—————————————————————-

Inspirational resources: http://www.zurb.com/playground/css-boxshadow-experiments , http://www.w3schools.com/css3/default.asp

8 thoughts on “Underwater Bubble CSS3 Effect – animation

  1. I’m extremely inspired together with your writing talents and also with the format in your blog. Is that this a paid topic or did you customize it your self? Anyway keep up the nice quality writing, it is uncommon to peer a nice blog like this one nowadays..

  2. Thanks for the kind words, I do my best :)
    I customized everything by myself (with WordPress it is not that difficult) – I am planning on changing few things in the future regarding the look of the blog and I hope that the quality of the posts will be even better.

  3. I am not sure where you’re getting your information, but it is a good topic. I need to spend some time learning more or understanding more. Thanks for magnificent info I was looking for this info.

  4. I must thank you for the efforts you have put in writing this
    website. I am hoping to view the same high-grade content by you in the future as
    well.

Leave a Reply

Your email address will not be published. Required fields are marked *