Bubbles

CSS Bubbles that 'flowing' to the top of the page...

HTML

<div id="bubbles">
    <div class="bubble x1 pink"></div>
    <div class="bubble x2 blue"></div>
    <div class="bubble x3 pink"></div>
    <div class="bubble x4 blue"></div>
    <div class="bubble x5 pink"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
      <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    <div class="bubble x6 blue"></div>
    
</div>

CSS

html,
body,
#bubbles { height: 100%; background:#000; }
body { overflow: hidden }
#bubbles { padding: 100px 0 }
.bubble {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    position: absolute;
    cursor: pointer;
}

.bubble.pink{
    background: #fff;
}

.bubble.blue{
    background: #fff
}

.bubble:hover{
    box-shadow: 0 0 30px 60px pink;
}

.x1 {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 1;
    -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.x2 {
    left: 200px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.5;
    -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.x3 {
    left: 350px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3;
    -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x4 {
    left: 470px;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0.35;
    -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out...

JavaScript

/* other infos:
http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background
http://stackoverflow.com/questions/11652688/css3-animated-bubble-background
http://jsfiddle.net/Fmy7F/1/
http://tutorialzine.com/2010/10/css3-animated-bubble-buttons/
http://speckyboy.com/2010/04/26/30-pure-css-alternatives-to-javascript/
*/