Las animaciones con CSS3 son increíbles. De buen rendimiento, y más sencillas que utilizar Javascript, son el futuro en cuanto al potencial de los navegadores. Uno de los efectos más atractivos es el de hacer a tus íconos giratorios con un pequeño grado de zoom. ¿Quieres saber cómo lograrlo?

Haz clic en este enlace para ver una demostración del efecto >>

Es importante destacar que esta animación va orientada a navegadores modernos que puedan utilizar Webkit sin inconvenientes. Con esto en cuenta, vamos a ver el código CSS que será necesario para esta animación:

1
2
3
4
5
@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}

La propiedad -webkit-transform es la encargada de esta animación. Defíne su valor como 0% con una rotación de 0 y escalada a 1, es decir, el estado original del elemento. Al 50% de la animación, el elemento debe ser rotado a 360 grados (es decir, una vuelta completa), y así el elemento debería crecer al doble de su tamaño. Al 100%, el elemento debe volver a su escala original y rotar 720 grados, viéndose de esa manera igual que al principio.

Con nuestra animación ya creada, es tiempo de aplicar la animación a un elemento en su estado «hover» (es decir, cuando el usuario posa el mouse sobre este elemento):

01
02
03
04
05
06
07
08
09
10
a.advert:hover {
  -webkit-animation-name:rotater;
  -webkit-animation-duration:500ms;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:ease-out;
  
  -moz-transform:rotate(720eg) scale(2);
  -moz-transition-duration:500ms;
  -moz-transition-timing-function: ease-out;
}

El evento es asignado usando la propiedad -webkit-animation-name. Las propiedades adicionales asignadas son:

  • -webkit-animation-duration que le da a la animación 500 milisegundos de duración
  • -webkit-animation-iteration-count hace que la animación ocurra una sola vez
  • -webkit-animation-timing-function configura la transición de la animación

¡Y listo! Hemos finalizado de crear nuestra animación. ¡Hasta la próxima!

Haz clic en este enlace para ver una demostración del efecto >>

Fuente original del artículo: David Walsh Blog