CSS: Landscape animation

Question

CSS: Landscape animation

Navigation

#1 by (2 votes)

1

I want to make a simple landscape based on the change of times of day, sunrise, sunset and dusk, in addition to the interval in which it begins to fall in the evening I want to add a small image of a star to get a better visualization of the animation and it is at this point that I have my problem.

Here's my code:

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>

I have already placed my star at the bottom of the page and I want it to be hidden by the star as darkness arrives and when it reaches the point of the night that the star begins to appear and is displayed at the top of the page (although I still do not know what property I could use to achieve this effect of appearance), with my code I have not managed to execute the animation I want the star to have, since it remains immobile in its initial position.

css3

asked by Sasori1264 19.05.2018 в 03:09

source

1 answer

How to make a selection list for users of my website Problem with Data structure in C - Trees

score 2 · Accepted Answer

Basically, it does not move or the animation does not run because it needs a key lock in @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>

If you want to obtain the result of the star being maintained, hidden and when the night comes it will be displayed. An option (maybe better) would use the animation values of fondopaisaje to know when to show the star, this is achieved in the first instance by adding a transparent background when starting the animation with an opacity in 0 and when it reaches 75% ie (when the sky is blue for the example the image is displayed) changing the opacity.

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>