Animate bubbles upwards continuously with CSS3?

Question

See the following image:

https://i.stack.imgur.com/F3znK.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!

As of right now i only have the HTML and CSS for "static" bubbles, i haven't added any animation yet. — qwerty, Dec 19 '12 at 13:06

Asad Saeeduddin · Accepted Answer · 2012-12-19T15:44:26.897

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;
    }
}

Thank you, that looks very promising! I'm at work atm so i'll look into it deeper in a few hours. — qwerty, Dec 19 '12 at 14:07
Just played a bit with it to add the wavering (just a *infinite alternate* animation on *margin-left*): http://jsfiddle.net/zr7sb/10/ (I didn't add support besides webkit, just copy-paste everything 3 times...) — TonioElGringo, Dec 19 '12 at 14:43
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. — FredTheWebGuy, Dec 19 '12 at 19:25
Great example but unfortunately it doesn't seem to work with IE10 — Jerome Provensal, Dec 20 '15 at 01:44
I eventually got it to work with IE10. See demo here: http://jsfiddle.net/p5gpx/629/ — Jerome Provensal, Dec 20 '15 at 02:00

score 2 · Answer 2 · edited Jan 17 '21 at 10:03

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;
}

score 0 · Answer 3 · answered Aug 03 '22 at 05:42

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Bubble Effect Create Using HTML and CSS</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 500px;
            height: 500px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            /* background-color: #00ff00; */
            background-image: linear-gradient(#00ff00,#00ff11,#11ee10);
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }

        .box h1 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            justify-content: space-between;
        }

        .bubble-box {
            display: flex;
            position: absolute;
            justify-content: space-around;
            align-items: center;
            bottom: -20%;
            width: 100%;
        }

        .bubble {
            width: 50px;
            animation: bubble 5s linear infinite;
        }


        .bubble:nth-child(1) {
            animation-delay: 2s;
            width: 40px;
        }

        .bubble:nth-child(2) {
            animation-delay: 3s;
            width: 60px;
        }

        .bubble:nth-child(3) {
            animation-delay: 1s;
            width: 30px;
        }

        .bubble:nth-child(4) {
            animation-delay: 5s;
            width: 35px;
        }

        .bubble:nth-child(5) {
            animation-delay: 4s;
            width: 70px;
        }

        @keyframes bubble {
            0% {
                transform: translateY(0);
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            70% {
                opacity: 1;
            }

            100% {
                transform: translateY(-80vh);
                opacity: 0;
            }
        }
    </style>
</head>
    <body>
        <div class="box">
            <div class="bubble-box">
                <img src="img/bubble.png" alt="#" class="bubble">
                <img src="img/bubble.png" alt="#" class="bubble">
                <img src="img/bubble.png" alt="#" class="bubble">
                <img src="img/bubble.png" alt="#" class="bubble">
                <img src="img/bubble.png" alt="#" class="bubble">
            </div>
        </div>
    </body>
</html>

Animate bubbles upwards continuously with CSS3?

3 Answers3