Geek Answers Handbook

Bubble up animation continuously with CSS3?

See the following image:

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

See these transparent circles in the background? What I want to do is make them animated from the bottom up, and then manually jump (turn off the screen) and start the animation again. Circles are simple <span> elements with border-radius to make a circle effect.

Is it possible to do this with CSS3, or will I need javascript for this? I also, if possible, would like to move the circles randomly sideways within the range X, moving up. I would suggest javascript is needed for randomness?

If possible, I would appreciate some suggestions / ideas on how to do this. If this is not possible with CSS, Javascript libraries are also welcome!

+7
source share
2 answers

Here is a clean CSS demonstration (adapted from this tutorial ), which depends on the animation property. Update: Thanks to TonioElGringo, the bubbles now also move to the side, although the movement is rhythmic, and not accidental:

 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; } }
+24
source

A very nice working example I created with pure CSS: http://demo.web3designs.com/animated-bubble-upwards-continuously-with-pure-css.htm

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; }
+3
source

More articles:


All Articles