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
Deja una respuesta