circadian_css_animation.php

<style type="text/css">
	@keyframes color-animation {
		/* 
			the colors at 
			"midnight"
		*/
		0%, 100% {
			background: rgba(0, 7, 22, 1);
			color: #f7ca83;
		}
		
	    /* The color during astronomical_twilight_begin */
	    23% {
	       background: rgba(39, 50, 79, 1);
	       color: #f7ca83;
	    }
	      /* The color during nautical_twilight_begin */
	    26% {
	       background: rgba(58, 79, 110, 1);
	       color: #f7ca83;
	    }
	      /* The color during civil_twilight_begin */
	    28% {
	       background: rgba(246, 156, 238, 1);
	       color: #946ed2;
	    }
	      /* The color during sunrise */
	    30% {
	       background: rgba(248, 235, 181, 1);
	       color: #e28336;
	    }
	      /* The color during transit */
	    54% {
	       background: rgba(32, 36, 10, 1);
	       color: #c0ae68;
	    }
	      /* The color during sunset */
	    77% {
	       background: rgba(255, 202, 123, 1);
	       color: #dd3805;
	    }
	      /* The color during civil_twilight_end */
	    79% {
	       background: rgba(56, 93, 148, 1);
	       color: #f9e287;
	    }
	      /* The color during nautical_twilight_end */
	    82% {
	       background: rgba(36, 67, 94, 1);
	       color: #f7c283;
	    }
	      /* The color during astronomical_twilight_end */
	    84% {
	       background: rgba(5, 18, 50, 1);
	       color: #f7ca83;
	    }
	}

	body{
		/* animate the backrground in a 24 hour cycle */
		animation: color-animation 86400s linear -79560s infinite normal;
	}

		a, a:visited, a:active{
		animation: color-animation 86400s linear -79560s infinite normal;
	}
</style>