#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>