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!
Twittear
No hay comentarios:
Publicar un comentario