¿Te gustaría aprender Diseño Web?
Tenemos los cursos que necesitas.¡Haz clic aquí!

El CSS

La primera tarea es crear la animación base con @-{vendor}-keyframes:

@keyframes rotater  { 
0% {  transform : rotate ( 0 )  scale ( 1 )  } 
50% {  transform : rotar ( 360 grados )  scale ( 2 )  } 
100% {  transform : rotar ( 720 grados )  scale ( 1 )  } 
}

La propiedad -webkit-transform es el animador en esta animación. Defina que al 0% el elemento está a 0 rotaciones y se lo escala a 1 – ese es el estado original del elemento. Al 50% de la animación, el elemento debe rotar 360 grados (un giro completo), y el elemento debe crecer dos veces. Al 100%, el elemento debe volver a su escala original y girar a 720 grados, por lo que tiene el mismo aspecto que cuando comenzó.

Con nuestra animación nombrada creada, es hora de aplicar la animación a un elemento en su estado de desplazamiento:

a .advert : hover  {  
	/ * safari / chrome / mozilla * / 
	nombre-animación : rotater ;  
	animación-duración : 500 ms ;  
	recuento de iteración-animación : 1 ;  
	animation-timing-function : ease-out ;

	/ * * Ópera / 
	-o-transform : rotación ( 360 grados )  escala ( 2 ) ; 
	-o-transition-duration : 500 ms ; 
	-o-transition-timing-function : ease-out ;

	/ * Es decir * / 
	-ms-Transform : rotate ( 360 ° )  escala ( 2 ) ; 
	-ms-transform-duration : 500 ms ; 
	-ms-transform-timing-function : ease-out ; 
}

El evento se asigna usando la  -webkit-animation-namepropiedad. Se asignan propiedades adicionales:   -webkit-animation-durationhace que la animación dure 500 milisegundos,  -webkit-animation-iteration-countdirige la animación para que se produzca solo una vez y  -webkit-animation-timing-functionestablece la transición de suavizado a la relajación.

Recomiendo usar este efecto con nodos DOM de tamaño fijo, con imágenes de fondo. Usar este efecto con nodos DOM simples no se ve muy bien. Déjame saber lo que piensas acerca de esta animación, y lo que crees que podría usar para verse aún mejor.

Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.

¿Te gustaría aprender Diseño Web?
Tenemos los cursos que necesitas.¡Haz clic aquí!
About Author

NGuerrero

0 0 votos
Article Rating
Suscribir
Notificar de
guest
2 Comments
La mas nueva
Más antiguo Más votada
Comentarios.
Ver todos los comentarios
biscobreak
3 Años Texto atrás

globos con luz …Here are several of the web pages we suggest for our visitors…

2
0
¿Te gusta este articulo? por favor comentax
()
x
Abrir chat
¿Quieres aprender a programar?
Hola 👋,
¿Te interesa información de nuestros cursos?