Esto que estas viendo aqui debajo no es una imagen gif, no, esta hecho completamente con CSS3. No precisa de librerias Jquery ni de ninguna clase de Javascript. Una de las muchas posibilidades que nos da el elemento 'animation' para realizar animaciones, bien sean de texto o de imagenes. En este caso me he decantado por el texto, con forma de burbujas que aparecen de una en una aumentando y disminuyendo de tamaño.
Si quieres ponerlo en tu web, aqui te dejo el codigo que he utilizado para su realizacion. Donde esta indicado en rojo, escribes las tres palabras que quieras.
<!-- Texto Pop - por REDEANDO-->
<div id="contenedorpop"><div class="textopop">
<span>TEXTO</span> <span>TEXTO</span> <span>TEXTO</span>
</div></div>
<!-- Estilos CSS3-->
<style>
.textopop {
text-align: center;
}
.textopop span {
font-family:Impact;
font-weight: ;
line-height:2em;
color:#FFE13B;
font-size:60px;
display: inline-block;
vertical-align: middle;
width: 200px;
height: 200px;
margin: 20px auto;
background: #5869E4;
border-radius: 100px;
-webkit-animation: loader 0.9s infinite alternate;
-moz-animation: loader 0.9s infinite alternate;
}
.textopop span:nth-of-type(2) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
}
.textopop span:nth-of-type(3) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
}
@-webkit-keyframes loader {
0% {
width: 200px;
height: 200px;
opacity: 0.9;
-webkit-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-webkit-transform: translateY(-21px);
}
}
@-moz-keyframes loader {
0% {
width: 200px;
height: 200px;
opacity: 0.9;
-moz-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-moz-transform: translateY(-21px);
}}
#contenedorpop{height: 150px;width: 600px;}
</style>
