Animation How to - Create bubble flying effect

Question

We would like to know how to create bubble flying effect.

Answer

revised from http://fiddle.jshell.net/BLfhR/36/show/light/


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
<!--   ww w  . java2  s.c  o  m-->
div {
  left: 50%;
  top: 50%;
  height: 10em;
  width: 10em;
  margin: -5em 0 0 -5em;
  position: relative;
}

b {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  line-height: 100px;
  background-color: hsla(0, 53%, 58%, 0.8);
  color: white;
  display: block;
  text-align: center;
}

b i {
  position: absolute;
  left: 0;
  right: 0;
}

div {
  -webkit-animation: random 10s linear infinite;
  -moz-animation: random 10s linear infinite;
}

div:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
}

@-webkit-keyframes random { 
  50% {font-size: 240px;}
}
@-moz-keyframes random { 
  50% {font-size: 240px;}
}
</style>
<script type='text/javascript'>
window.onload=function(){
    var styles = [],
        style = document.createElement('style'),
        fragment = document.createDocumentFragment(),
        elmtxt, elm;
    for (var i = 0, l = 50; i < l; i++) {
        elm = document.createElement('b');
        elmtxt = document.createElement('i');
        elmtxt.textContent = i;
        elm.appendChild(elmtxt);
        fragment.appendChild(elm);
        styles.push('b:nth-of-type(' + i + ') { left: ' + Math.random() * 2 + 'em; top: '+ Math.random() * 2 + 'em; }');
        fragment.appendChild(elm);
    }
    style.textContent = styles.join('');
    document.head.appendChild(style);
    document.querySelector('div').appendChild(fragment);
}
</script>
</head>
<body>
  <div></div>
</body>
</html>

The code above is rendered as follows: