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:
1 2 3 4 5 | @-webkit-keyframes rotater { 0% { -webkit- transform : rotate ( 0 ) scale ( 1 ) } 50% { -webkit- transform : rotate ( 360 deg) scale ( 2 ) } 100% { -webkit- transform : rotate ( 720 deg) 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 : 500 ms; -webkit- animation-iteration-count : 1 ; -webkit- animation-timing-function :ease-out; -moz- transform : rotate ( 720 eg) scale ( 2 ); -moz-transition-duration: 500 ms; -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