Animaciones

Varios Efectos Con Transición

Gira

jwebmx.blogspot.mx

Se Extiende

Mi Blog  - - >   jwebmx.blogspot.mx

Se Agranda

jwebmx.blogspot.mx

Se Deforma

jwebmx.blogspot.mx

Se Mueve

jwebmx.blogspot.mx

codigo de la hoja de estilo

/* Codigo para hacer girar el link */
#gira{
width:150px;
height:25px;
transition:2s;
-moz-transition:2s; /* Para Firefox */
-webkit-transition:2s; /* Para Chrome */
-o-transition:2s; /* Para Opera */
}
#gira:hover{
transform:rotate(360deg);
-moz-transform:rotate(360deg); /* Para Firefox */
-webkit-transform:rotate(360deg); /* Para Chrome */
-o-transform:rotate(360deg); /* Para Opera */
}
/* Codigo para mostrar el link */
#extiende{
width:55px;
height:25px;
transition:2.5s;
-moz-transition:2.5s; /* Para Firefox */
-webkit-transition:2.5s; /* Para Chrome */
-o-transition:2.5s; /* Para Opera */
overflow:hidden; /* Se oculta el texto que sobre saldria de la seccion */
}
#extiende:hover{
width: 250px;
}
/* Codigo para agrandar la fuente */
#agranda{
font-size:15px;
transition:1.5s;
-moz-transition:1.5s; /* Para Firefox */
-webkit-transition:1.5s; /* Para Chrome */
-o-transition:1.5s; /* Para Opera */
}
#agranda:hover{
font-size:20px;
}
/* Codigo para deformar el texto */
#deforma{
width:55px;
height:25px;
transition:2.5s;
-ms-transition:2.5s; /* Para Explorer 9 -> */
-moz-transition:2.5s; /* Para Firefox */
-webkit-transition:2.5s; /* Para Chrome */
-o-transition:2.5s; /* Para Opera */
}
#deforma:hover{
transform:skew(50deg,20deg);
-ms-transform:skew(50deg,20deg); /* Para Explorer 9 -> */
-moz-transform:skew(50deg,20deg); /* Para Firefox */
-webkit-transform:skew(50deg,20deg); /* Para Chrome */
-o-transform:skew(50deg,20deg); /* Para Opera */
}
/* Codigo Para Mover el Texto */
#mueve{
width:55px;
height:25px;
transition:2.5s;
-ms-transition:2.5s; /* Para Explorer 9 -> */
-moz-transition:2.5s; /* Para Firefox */
-webkit-transition:2.5s; /* Para Chrome */
-o-transition:2.5s; /* Para Opera */
}
#mueve:hover{
transform:translate(100px,100px);
-ms-transform:translate(100px,100px); /* Para Explorer 9 -> */
-moz-transform:translate(100px,100px); /* Para Firefox */
-webkit-transform:translate(100px,100px); /* Para Chrome */
-o-transform:translate(100px,100px); /* Para Opera */ }
a{
text-decoration:none;
color:#666666;
}

Codigo  HTML5

¡ Nota Algunas Animaciones No Son Compatibles Con IExplorer !