Cómo crear íconos giratorios con efecto de zoom en tu sitio web con CSS3

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:

    @-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):

    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