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.