1

Quiero hacer un paisaje simple basándome en el cambio de los tiempos del día, amanecer, atardecer y anochecer, ademas de que llegado el intervalo en el que comienza a caer el anochecer quiero agregar una pequeña imagen de una estrella para obtener una mejor visualización del la animación y es en este punto en el que tengo mi problema.

He aquí mi código:

body{

	-webkit-animation-name:cambios;
	-webkit-animation-duration:15s;
	
	
    }
    .estrella{
	background-image: url(estrella.png);
	position: relative;
	width: 255px;
	height: 250px;
	animation-name: estrella;
	animation-duration: 15s;
	animation-delay: 1s;
	animation-iteration-count: 1;
	top: 700px;
	left: 300px;

	

    }


    @keyframes cambios{
	/*Keyframes para los intervalos de colores*/
	0%{
	background: yellow;
	}

	50%{
	background: orange;
	}
	100%{

	background: #0404B4;
	}

    @keyframes estrella{
	/*Keyframes para la imagen de la estrella*/
	from{
	top: 700px;

	}
	to{
	top: 20px;
	}
    }
<div class="estrella"></div>

Ya he ubicado mi estrella en la parte inferior de la pagina y que quiero que, mientras llega el anochecer la estrella este oculta y cuando llegue al punto de la noche que la estrella comience a aparecer y se visualice en la parte superior de la pagina (aunque aun desconozco que propiedad podría usar para lograr dicho efecto de aparición), con mi código no he logrado que se ejecute la animación que deseo que la estrella tenga, ya que se mantiene inmóvil en su posición inicial.

1 respuesta 1

2

Básicamente se queda sin moverse o no se ejecuta la animación ya que le hace falta un cierre de llaves en @keyframes cambios

body{

-webkit-animation-name:cambios;
-webkit-animation-duration:15s;

}
.estrella{
background-image: url(https://vignette.wikia.nocookie.net/geniogramistas/images/5/5e/Estrella.png/revision/latest?cb=20100909065357);
background-repeat: no-repeat;
position: relative;
width: 255px;
height: 250px;
animation-name: estrella;
animation-duration: 15s;
animation-delay: 1s;
animation-iteration-count: 1;
top: 700px;
left: 300px;
}


@keyframes cambios{
/*Keyframes para los intervalos de colores*/
    0%{
    background: yellow;
    }

    50%{
    background: orange;
    }
    100%{

    background: #0404B4;
    }
} /*esto hacía falta*/

@keyframes estrella{
/*Keyframes para la imagen de la estrella*/
    from{
    top: 700px;
    }
    to{
    top: 20px;
    }
}
<div class="estrella"></div>

Si desea obtener el resultado de que la estrella se mantenga , oculta y cuando llegue la noche se muestre . Una opción (quizá haya mejores) sería utilizar los valores de la animación de fondopaisaje para saber cuando mostrar la estrella, esto se logra en primera instancia agregando un fondo transparente al iniciar la animación con una opacidad en 0 y cuando llegue al 75% es decir (cuando el cielo esté azul para el ejemplo se muestre la imagen) cambiando la opacidad.

Ejm

body{
    animation: fondopaisaje 5s linear infinite;
}
.estrella {
  width: 35vh;
  height: 35vh;
  background: url(https://vignette.wikia.nocookie.net/geniogramistas/images/5/5e/Estrella.png) no-repeat; 
  animation: estrella 5s linear infinite;
}

@keyframes fondopaisaje{
    0%{background: yellow;}
    25%{background: orange;}
    50%{background: red;}
    75%{background: blue;}
    100%{background: black;}
}

@keyframes estrella{
    0%{background: transparent; opacity: 0}
    75%{opacity: 1}
}
<div class="estrella"></div>

4
  • ooh , no me había dado cuenta... bueno entrando a otro punto ¿Sabes que propiedad podría usar para que la estrella se mantenga oculta durante el día y tenga su aparición ya llegada la noche?
    – Sasori1264
    Commented el 19 may. 2018 a las 2:12
  • @Sasori1264 sí ,era un problema simple. Con respecto a lo otro pueden haber más de 1 solución para lograr eso ... ¿Ese es el resultado final que desea obtener?
    – Dev. Joel
    Commented el 19 may. 2018 a las 22:46
  • Si, ese es el resultado que había visualizado desde un principio
    – Sasori1264
    Commented el 20 may. 2018 a las 2:44
  • 1
    @Sasori1264 disculpa la demora, estuve algo ocupado ... añadí una posible solución para su fin. espero ayude un poco. Saludos
    – Dev. Joel
    Commented el 20 may. 2018 a las 6:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.