Animate bubbles upwards continuously with CSS3?

Question

See the following image:

http://i.imgur.com/3vTrB.png

See those transparent circles in the background? What i want to do is make them animate from the bottom up, and then manually jump down (off screen) and re-start the animation. The circles are simple <span> elements with border-radius to make the circle effect.

Is this possible to do with CSS3, or will i be needing javascript for that? I would also, if possible, like to move the circles randomly sideways within an X range while moving up. I would imagine the randomness would require javascript?

If possible, i would appreciate some suggestions/ideas as for how to make it. If not possible with CSS, Javascript libraries is welcome as well!

Solution 1

Here is a pure CSS demonstration (adapted from this tutorial) that relies on the animation property. Update: Thanks to TonioElGringo the bubbles now also move sideways, although the motion is rhythmic, not random:

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

.x1 {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.2;
    -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 infinite alternate;
    -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x5 {
    left: 150px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3;
    -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -moz-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -o-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
@-webkit-keyframes moveclouds {
    0% {
        top: 500px;
    }
    100% {
        top: -500px;
    }
}

@-webkit-keyframes sideWays {
    0% {
        margin-left:0px;
    }
    100% {
        margin-left:50px;
    }
}

@-moz-keyframes moveclouds {     
    0% {
        top: 500px;
    }

    100% {
        top: -500px;
    }
}

@-moz-keyframes sideWays {
    0% {
        margin-left:0px;
    }
    100% {
        margin-left:50px;
    }
}
@-o-keyframes moveclouds {
    0% {
        top: 500px;
    }
    100% {
        top: -500px;
    }
}

@-o-keyframes sideWays {
    0% {
        margin-left:0px;
    }
    100% {
        margin-left:50px;
    }
}

Solution 2

A very beautiful working example I have created with pure 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;
}

Comments

[Asad Saeeduddin]

Could you please put up a jsFiddle for testing?

[qwerty]

As of right now i only have the HTML and CSS for "static" bubbles, i haven't added any animation yet.

[Asad Saeeduddin]

Yes, that's fine. Just so we can have a starting point.

[qwerty]

Thank you, that looks very promising! I'm at work atm so i'll look into it deeper in a few hours.

[TonioElGringo]

Just played a bit with it to add the wavering (just a infinite alternate animation on margin-left): jsfiddle.net/zr7sb/10 (I didn't add support besides webkit, just copy-paste everything 3 times...)

[FredTheWebGuy]

Fair warning: css animations are extremely cpu intensive for animations taking longer than 1s- at least for mobile devices and old computers. Consider switching to js based animations, as it manages resources a lot more efficiently.

[Jerome Provensal]

Great example but unfortunately it doesn't seem to work with IE10

[Jerome Provensal]

I eventually got it to work with IE10. See demo here: jsfiddle.net/p5gpx/629