I want to make a change of color to the whole body of an html, having as main colors the yellow, orange and black simulating a sunrise, sunset and sunset, clearly these colors have to have their time each one to simulate the transition, but I can not pass from the first color (yellow) to the next (orange) and this one towards the black (simulating the evening)
That can be done with iterations of CSS . At body I add an animation, which in my case I put the name anim , which has duration of 5 seconds, and repeats indefinitely.
The animation runs immediately after you load the web page. With @keyframes I determine the time intervals, as a percentage of the progress.
In my example, my plan was to change from yellow , orange , black , and then change the colors again, but in a way Reverse, orange , and again yellow , so that when it turns yellow, the animation starts again.
I calculated the percentages manually, the animation has 5 parts, so I do 100/(partes-1) , and it gives that each %25 has to change color.
@keyframes anim{
0% {background-color: #ff0;} /*Amarillo*/
25% {background-color: #f80;} /*Naranja*/
50% {background-color: #000;} /*Negro*/
75% {background-color: #f80;} /*Otra vez naranja*/
100% {background-color: #ff0;} /*Otra vez amarillo*/
}
body {
animation-name: anim;
animation-duration: 5s;
animation-iteration-count: infinite;
}