Edit in JSFiddle

#contenedor2{
  /*Colocar en el centro*/
  position: absolute;
  top: 50%; 
  left: 50%; 
  width: 600px; 
  height: 400px; 
  margin-top: -250px;
  margin-left: -350px;
}

.bubble {
  border-radius:50px;
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
  -o-border-radius:50px;

  /*Al empezar todas las burbujas estarán en el centro*/
  position: absolute;
  top: 50%;      
  left: 50%;     
  width: 100px;     
  height: 100px;     
  margin-top: -50px; 
  margin-left: -50px;
}

.bubble p {
 text-align: center;
 margin-top: 40%;
 color: #FFFFFF;
}

.bubble.c45deg{
   animation:        f45deg 6s linear infinite; 
  -moz-animation:    f45deg 6s linear infinite; 
  -webkit-animation: f45deg 6s linear infinite; 
  -o-animation:      f45deg 6s linear infinite; 
}


.bubble.c90deg{
   animation:        f90deg 6s linear infinite; 
  -moz-animation:    f90deg 6s linear infinite; 
  -webkit-animation: f90deg 6s linear infinite; 
  -o-animation:      f90deg 6s linear infinite; 
}

.bubble.c135deg{
   animation:        f135deg 6s linear infinite; 
  -moz-animation:    f135deg 6s linear infinite; 
  -webkit-animation: f135deg 6s linear infinite;  
  -o-animation:      f135deg 6s linear infinite; 
}


.bubble.c180deg{
  animation:         f180deg 6s linear infinite;  
  -moz-animation:    f180deg 6s linear infinite;
  -webkit-animation: f180deg 6s linear infinite;  
  -o-animation:      f180deg 6s linear infinite; 
}

.bubble.c225deg{
  animation:         f225deg 6s linear infinite; 
  -moz-animation:    f225deg 6s linear infinite; 
  -webkit-animation: f225deg 6s linear infinite;  
  -o-animation:      f225deg 6s linear infinite;    
}

.bubble.c270deg{
  animation:         f270deg 6s linear infinite; 
  -moz-animation:    f270deg 6s linear infinite; 
  -webkit-animation: f270deg 6s linear infinite;  
  -o-animation:      f270deg 6s linear infinite;    
}

.bubble.c315deg{
  animation:         f315deg 6s linear infinite; 
  -moz-animation:    f315deg 6s linear infinite; 
  -webkit-animation: f315deg 6s linear infinite;  
  -o-animation:      f315deg 6s linear infinite;    
}

.bubble.c360deg{
   animation:        f360deg 6s linear infinite; 
  -moz-animation:    f360deg 6s linear infinite; 
  -webkit-animation: f360deg 6s linear infinite;  
  -o-animation:      f360deg 6s linear infinite; 
}

.rosa    { background: #E8576A;}

.verde   { background: #8DBA79;}

.naranja { background: #F7A967;}

.azul    { background: #94B6B5;}

.morado  { background: #A189B5;}

.turquesa{ background: #33AFB0;}

.amarillo{ background: #FED94E;}

.gris    { background: #726F6A;}


/*Animacion 45º*/
@keyframes f45deg {
    0%   { transform: rotate(45deg)  translate(12em) }
	100% { transform: rotate(405deg) translate(12em) }
}
@-moz-keyframes f45deg { /* Firefox */
    0%   { -moz-transform: rotate(45deg)  translate(12em) }
	100% { -moz-transform: rotate(405deg) translate(12em) }
}
@-webkit-keyframes f45deg { /* Safari and Chrome */
    0%   { -webkit-transform: rotate(45deg)  translate(12em) }
	100% { -webkit-transform: rotate(405deg) translate(12em) }
}
@-o-keyframes f45deg { /* Opera */
    0%   { -o-transform: rotate(45deg)  translate(12em) }
	100% { -o-transform: rotate(405deg) translate(12em) }
}


/*Animacion 90º*/
@keyframes f90deg {
    0%   { transform:rotate(90deg)  translate(12em) rotate(-90deg) }
    100% { transform: rotate(450deg) translate(12em) rotate(-450deg) }
}
@-moz-keyframes f90deg { /* Firefox */
    0%   { -moz-transform: rotate(90deg)  translate(12em) rotate(-90deg) }
    100% { -moz-transform: rotate(450deg) translate(12em) rotate(-450deg)}
}
@-webkit-keyframes f90deg { /* Safari and Chrome */
    0%   { -webkit-transform: rotate(90deg)  translate(12em) rotate(-90deg)}
    100% { -webkit-transform: rotate(450deg) translate(12em) rotate(-450deg) }
}
@-o-keyframes f90deg { /* Opera */
    0%   { -o-transform: rotate(90deg)  translate(12em) rotate(-90deg) }
    100% { -o-transform: rotate(450deg) translate(12em) rotate(-450deg)}
}

   

/*Animacion 135º*/
@keyframes f135deg {
    0%   { transform: rotate(135deg) translate(12em) }
    100% { transform: rotate(495deg) translate(12em) }
}
@-moz-keyframes f135deg { /* Firefox */
    0%   { -moz-transform: rotate(135deg) translate(12em) }
    100% { -moz-transform: rotate(495deg) translate(12em) }
}
@-webkit-keyframes f135deg{ /* Safari and Chrome */
    0%   { -webkit-transform: rotate(135deg) translate(12em) }
    100% { -webkit-transform: rotate(495deg) translate(12em) }
}

@-o-keyframes f135deg { /* Opera */
    0%   { -o-transform: rotate(135deg) translate(12em) }
    100% { -o-transform: rotate(495deg) translate(12em) }
}



/*Animacion 180º*/
@keyframes f180deg {
    0%   { transform: rotate(180deg) translate(12em)}
    100% { transform: rotate(540deg) translate(12em)}
}
@-moz-keyframes f180deg { /* Firefox */
    0%   { -moz-transform: rotate(180deg) translate(12em)}
    100% { -moz-transform: rotate(540deg) translate(12em)}
}
@-webkit-keyframes f180deg{ /* Safari and Chrome */
    0%   { -webkit-transform: rotate(180deg) translate(12em)}
    100% { -webkit-transform: rotate(540deg) translate(12em)}
}

@-o-keyframes f180deg { /* Opera */
    0%   { -o-transform: rotate(180deg) translate(12em)}
    100% { -o-transform: rotate(540deg) translate(12em)}
}



/*Animacion 225º*/
@keyframes f225deg {
    0%   { transform: rotate(225deg) translate(12em)}
    100% { transform: rotate(585deg) translate(12em)}
}
@-moz-keyframes f225deg { /* Firefox */
    0%   { -moz-transform: rotate(225deg) translate(12em)}
    100% { -moz-transform: rotate(585deg) translate(12em)}
}
@-webkit-keyframes f225deg{ /* Safari and Chrome */
    0% { -webkit-transform: rotate(225deg) translate(12em)}
    100% { -webkit-transform: rotate(585deg) translate(12em)}
}

@-o-keyframes f225deg { /* Opera */
    0%   { -o-transform: rotate(225deg) translate(12em)}
    100% { -o-transform: rotate(585deg) translate(12em)}
}

/*Animacion 270º*/
@keyframes f270deg {
    0%   { transform: rotate(270deg) translate(12em)}
    100% { transform: rotate(630deg) translate(12em)}
}
@-moz-keyframes f270deg { /* Firefox */
    0%   { -moz-transform: rotate(270deg) translate(12em)}
    100% { -moz-transform: rotate(630deg) translate(12em)}
}
@-webkit-keyframes f270deg  { /* Safari and Chrome */
    0%   { -webkit-transform: rotate(270deg) translate(12em)}
    100% { -webkit-transform: rotate(630deg) translate(12em)}
}

@-o-keyframes f270deg { /* Opera */
    0%   { -o-transform: rotate(270deg) translate(12em)}
    100% { -o-transform: rotate(630deg) translate(12em)}
}

	
/*Animacion 315º*/
@keyframes f315deg {
    0%   { transform: rotate(315deg) translate(12em)}
    100% { transform: rotate(675deg) translate(12em)}
}
@-moz-keyframes f315deg { /* Firefox */
    0%   { -moz-transform: rotate(315deg) translate(12em)}
    100% { -moz-transform: rotate(675deg) translate(12em)}
}
@-webkit-keyframes f315deg  { /* Safari and Chrome */
    0%   { -webkit-transform: rotate(315deg) translate(12em)}
    100% { -webkit-transform: rotate(675deg) translate(12em)}
}

@-o-keyframes f315deg { /* Opera */
    0%   { -o-transform: rotate(315deg) translate(12em)}
    100% { -o-transform: rotate(675deg) translate(12em)}
}
	
/*Animacion 360º*/
@keyframes f360deg {
    0%   { transform: rotate(360deg) translate(12em)}
    100% { transform: rotate(720deg) translate(12em)}
}
@-moz-keyframes f360deg { /* Firefox */
    0%   { -moz-transform: rotate(360deg) translate(12em)}
    100% { -moz-transform: rotate(720deg) translate(12em)}
}
@-webkit-keyframes f360deg { /* Safari and Chrome */
    0%   { -webkit-transform: rotate(360deg) translate(12em)}
    100% { -webkit-transform: rotate(720deg) translate(12em)}
}

@-o-keyframes f360deg { /* Opera */
    0%   { -o-transform: rotate(360deg) translate(12em)}
    100% { -o-transform: rotate(720deg) translate(12em)}
}
 <div id="contenedor2">   
   <div class="bubble c45deg rosa">     <p>A</p> </div>
   <div class="bubble c90deg naranja">  <p>B</p> </div>   
    <div class="bubble c135deg azul">   <p>C</p> </div>   
   <div class="bubble c180deg verde">   <p>D</p> </div>   
   <div class="bubble c225deg morado">  <p>E</p> </div>
   <div class="bubble c270deg turquesa"><p>F</p> </div>   
   <div class="bubble c315deg amarillo"><p>G</p> </div>   
   <div class="bubble c360deg gris">    <p>H</p> </div> 
 </div>