sábado, 14 de junio de 2014

Rotación y transparencia



1. Objetivo

Vamos a crear una animación en la cual una imagen va a girar sobre sí misma y se va a volver transparente.


2. La estructura

Cree una caja <div> con un código de identificación.

<div id="imagen"><img src="leon.jpg" alt="León" /></div>

Aplíquele una posición absoluta.

#imagen {
position: absolute;
left: 400px;
top: 300px;
}


3. La animación

Para hacer que la imagen se vuelva transparente vamos a usar la propiedad opacity.

Para hacer que la imagen gire sobre ella misma vamos a usar la propiedad transform.

@-webkit-keyframes girar {
0% {
opacity: 1;
-webkit-transform: rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes girar {
0% {
opacity: 1;
-moz-transform: rotate(0deg);
}
100% {
opacity: 0;
-moz-transform: rotate(360deg);
}
}
@keyframes girar {
0% {
opacity: 1;
transform: rotate(0deg);
}
100% {
opacity: 0;
transform: rotate(360deg);
}
}

Ahora vamos a aplicar esta animación con el selector de la caja:

#imagen {
position: absolute;
left: 400px;
top: 300px;
-webkit-animation: girar 5s infinite;
-moz-animation: girar 5s infinite;
animation: girar 5s infinite;
}


4. La visualización

Este es el resultado final esperado:



Espero haber ayudado en algo. Hasta la próxima oportunidad!







No hay comentarios:

Publicar un comentario en la entrada