#contenedor2{
/*Colocar en el centro*/
position: absolute;
top: 50%; /* Buscamos el centro horizontal (relativo) del navegador */
left: 50%; /* Buscamos el centro vertical (relativo) del navegador */
width: 600px; /* Definimos el ancho del objeto a centrar */
height: 400px; /* Definimos el alto del objeto a centrar */
margin-top: -250px; /* Restamos la mitad de la altura del objeto con un margin-top */
margin-left: -350px; /* Restamos la mitad de la anchura del objeto con un margin-left */
}
.bubble {
width: 50px;
height: 50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
/*Al empezar todas las burbujas estarán en el centro*/
position: absolute;
top: 50%; /* Buscamos el centro horizontal (relativo) del navegador */
left: 50%; /* Buscamos el centro vertical (relativo) del navegador */
width: 100px; /* Definimos el ancho del objeto a centrar */
height: 100px; /* Definimos el alto del objeto a centrar */
margin-top: -50px; /* Restamos la mitad de la altura del objeto con un margin-top */
margin-left: -50px; /* Restamos la mitad de la anchura del objeto con un margin-left */
margin:5px;
}
.bubble.c45deg{
animation: f45deg 3s ease-in alternate infinite;
-moz-animation: f45deg 3s ease-in alternate infinite;
-webkit-animation: f45deg 3s ease-in alternate infinite;
-o-animation: f45deg 3s ease-in alternate infinite;
}
.bubble.c90deg{
animation: f90deg 3s ease-in alternate infinite;
-moz-animation: f90deg 3s ease-in alternate infinite;
-webkit-animation: f90deg 3s ease-in alternate infinite;
-o-animation: f90deg 3s ease-in alternate infinite;
}
.bubble.c135deg{
animation: f135deg 3s ease-in alternate infinite;
-moz-animation: f135deg 3s ease-in alternate infinite;
-webkit-animation: f135deg 3s ease-in alternate infinite;
-o-animation: f135deg 3s ease-in alternate infinite;
}
.bubble.c180deg{
animation: f180deg 3s ease-in alternate infinite;
-moz-animation: f180deg 3s ease-in alternate infinite;
-webkit-animation: f180deg 3s ease-in alternate infinite;
-o-animation: f180deg 3s ease-in alternate infinite;
}
.bubble.c225deg{
animation: f225deg 3s ease-in alternate infinite;
-moz-animation: f225deg 3s ease-in alternate infinite;
-webkit-animation: f225deg 3s ease-in alternate infinite;
-o-animation: f225deg 3s ease-in alternate infinite;
}
.bubble.c270deg{
animation: f270deg 3s ease-in alternate infinite;
-moz-animation: f270deg 3s ease-in alternate infinite;
-webkit-animation: f270deg 3s ease-in alternate infinite;
-o-animation: f270deg 3s ease-in alternate infinite;
}
.bubble.c315deg{
animation: f315deg 3s ease-in alternate infinite;
-moz-animation: f315deg 3s ease-in alternate infinite;
-webkit-animation: f315deg 3s ease-in alternate infinite;
-o-animation: f315deg 3s ease-in alternate infinite;
}
.bubble.c360deg{
animation: f360deg 3s ease-in alternate infinite;
-moz-animation: f360deg 3s ease-in alternate infinite;
-webkit-animation: f360deg 3s ease-in alternate infinite;
-o-animation: f360deg 3s ease-in alternate infinite;
}
/* Colores para los diferentes circulos */
.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 grados*/
@keyframes f45deg {
0% { opacity:0;}
100% { opacity:0.6; transform: rotate(45deg) translate(12em);}
}
@-moz-keyframes f45deg { /* Firefox */
0% { opacity:0;}
100% { opacity:0.6; -moz-transform: rotate(45deg) translate(12em);}
}
@-webkit-keyframes f45deg { /* Safari and Chrome */
0% { opacity:0;}
100% { opacity:0.6; -webkit-transform: rotate(45deg) translate(12em);}
}
@-o-keyframes f45deg { /* Opera */
0% { opacity:0;}
100% { opacity:0.6; -o-transform: rotate(45deg) translate(12em);}
}
/*Animacion 90 grados*/
@keyframes f90deg {
0% { opacity:0;}
100% { opacity:0.6; transform:rotate(90deg) translate(12em);}
}
@-moz-keyframes f90deg { /* Firefox */
0% { opacity:0;}
100% { opacity:0.6; -moz-transform:rotate(90deg) translate(12em);}
}
@-webkit-keyframes f90deg { /* Safari and Chrome */
0% { opacity:0;}
100% { opacity:0.6; -webkit-transform: rotate(90deg) translate(12em);}
}
@-o-keyframes f90deg { /* Opera */
0% { opacity:0;}
100% { opacity:0.6; -o-transform:rotate(90deg) translate(12em);}
}
/*Animacion 135 grados*/
@keyframes f135deg {
0% { opacity:0;}
100% { opacity:0.6;transform: rotate(135deg) translate(12em);}
}
@-moz-keyframes f135deg { /* Firefox */
0% { opacity:0;}
100% { opacity:0.6; -moz-transform: rotate(135deg) translate(12em);}
}
@-webkit-keyframes f135deg{ /* Safari and Chrome */
0% { opacity:0;}
100% { opacity:0.6; -webkit-transform: rotate(135deg) translate(12em);}
}
@-o-keyframes f135deg { /* Opera */
0% { opacity:0;}
100% { opacity:0.6; -o-transform: rotate(135deg) translate(12em);}
}
/*Animacion 180 grados*/
@keyframes f180deg {
0% { opacity:0;}
100% { opacity:0.6; transform: rotate(180deg) translate(12em);}
}
@-moz-keyframes f180deg { /* Firefox */
0% { opacity:0;}
100% { opacity:0.6; -moz-transform: rotate(180deg) translate(12em);}
}
@-webkit-keyframes f180deg{ /* Safari and Chrome */
0% { opacity:0;}
100% { opacity:0.6; -webkit-transform: rotate(180deg) translate(12em);}
}
@-o-keyframes f180deg { /* Opera */
0% { opacity:0;}
100% { opacity:0.6; -o-transform: rotate(180deg) translate(12em);}
}
/*Animacion 225 grados*/
@keyframes f225deg {
0% { opacity:0;}
100% { opacity:0.6; transform: rotate(225deg) translate(12em);}
}
@-moz-keyframes f225deg { /* Firefox */
0% { opacity:0;}
100% { opacity:0.6; -moz-transform: rotate(225deg) translate(12em);}
}
@-webkit-keyframes f225deg{ /* Safari and Chrome */
0% { opacity:0;}
100% { opacity:0.6; -webkit-transform: rotate(225deg) translate(12em);}
}
@-o-keyframes f225deg { /* Opera */
0% { opacity:0;}
100% { opacity:0.6; -o-transform: rotate(225deg) translate(12em);}
}
/*Animacion 270 grados*/
@keyframes f270deg {
0% { opacity:0;}
100% { opacity:0.6;transform: rotate(270deg) translate(12em);}
}
@-moz-keyframes f270deg { /* Firefox */
0% { opacity:0;}
100% { opacity:0.6; -moz-transform: rotate(270deg) translate(12em);}
}
@-webkit-keyframes f270deg { /* Safari and Chrome */
0% { opacity:0;}
100% { opacity:0.6; -webkit-transform: rotate(270deg) translate(12em);}
}
@-o-keyframes f270deg { /* Opera */
0% { opacity:0;}
100% { opacity:0.6; -o-transform: rotate(270deg) translate(12em);}
}
/*Animacion 315 grados*/
@keyframes f315deg {
0% { opacity:0;}
100% { opacity:0.6;transform: rotate(315deg) translate(12em);}
}
@-moz-keyframes f315deg { /* Firefox */
0% { opacity:0;}
100% { opacity:0.6; -moz-transform: rotate(315deg) translate(12em);}
}
@-webkit-keyframes f315deg { /* Safari and Chrome */
0% { opacity:0;}
100% { opacity:0.6; -webkit-transform: rotate(315deg) translate(12em);}
}
@-o-keyframes f315deg { /* Opera */
0% { opacity:0;}
100% { opacity:0.6; -o-transform: rotate(315deg) translate(12em);}
}
/*Animacion 360 grados*/
@keyframes f360deg {
0% { opacity:0;}
100% { opacity:0.6; transform: rotate(360deg) translate(12em);}
}
@-moz-keyframes f360deg { /* Firefox */
0% { opacity:0;}
100% { opacity:0.6; -moz-transform: rotate(360deg) translate(12em);}
}
@-webkit-keyframes f360deg { /* Safari and Chrome */
0% { opacity:0;}
100% { opacity:0.6; -webkit-transform: rotate(360deg) translate(12em);}
}
@-o-keyframes f360deg { /* Opera */
0% { opacity:0;}
100% { opacity:0.6; -o-transform: rotate(360deg) translate(12em);}
}
<div id="contenedor2">
<div class="bubble c45deg rosa"></div>
<div class="bubble c90deg naranja"></div>
<div class="bubble c135deg azul"></div>
<div class="bubble c180deg verde"></div>
<div class="bubble c225deg morado"></div>
<div class="bubble c270deg turquesa"></div>
<div class="bubble c315deg amarillo"></div>
<div class="bubble c360deg gris"></div>
</div>