<div class="container">

		<div class="bubble"></div>
		<div class="bubble second"></div>
		<div class="bubble third"></div>


</div>

body{
  background: url(http://www.startextures.com/starnetblog/wp-content/uploads/2011/02/starnetblog_subtile_gray_pattern4.jpg);
}

.container{
  width: 500px;
  height: 200px;
  margin: auto;
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

.bubble{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  float: left;
  margin-right: 10px;
  background: transparent;
  position:relative;
}


.bubble:before{
  content:"";
  display:block;
  width: 15px;
  height: 30px;
  background: rgba(255,255,255,0.2);
  position:absolute;
  top: 25px;
  right: 35px;
  border-radius: 5% 100%;
}

@keyframes bubble {
  from  { -moz-transform: scale(0);}
    to  { -moz-transform: scale(100%); background: #333;}
}

.bubble {
  animation: bubble .7s 1 alternate ease-in-out forwards;
}

.second{
  animation-delay:.2s;
}

.third{
  animation-delay:.3s;
}