Q:

CSS: Cambio de colores por intervalos de tiempo

Quiero realizar un cambio de color a todo el body de un html, teniendo como principales colores el amarillo,anaranjado y negro simulando un amanecer,atardecer y anochecer,claramente estos colores tienen que tener su tiempo cada uno para simular la transición,pero no logro pasar del primer color (amarillo) hacia el siguiente (anaranjado) y este hacia el negro (simulando el anochecer)

A:

Eso se puede hacer con iteraciones de CSS. Al body le agrego una animación, que en mi caso le puse el nombre anim, que tiene duración de 5 segundos, y se repite indefinidamente.
La animación se ejecuta inmediatamente después de que carga la página web. Con @keyframes determino los intervalos de tiempo, en porcentaje del progreso.
En mi ejemplo, mi plan fue cambiar de amarillo, naranja, negro, y luego volver a cambiar los colores, pero de manera inversa, naranja, y otra vez amarillo, de modo que cuando vuelve a amarillo, empieza la animación otra vez.
Los porcentajes los calculé de manera manual, la animación tiene 5 partes, entonces hago 100/(partes-1), y da que cada un %25 tiene que cambiar de 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;
}

