JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<div id="sky"></div>
<div id="stars"></div>
<div id="astral"></div>

SCSS

$cycleLength: 30s;
$sun: lightyellow;
$sunset: orangered;
$haloSize: 50px;
$daySky: lightblue;
$nightSky: midnightblue;

/*@-webkit-keyframes daycycle {
    from { -webkit-transform: rotate(45deg); }
    to { -webkit-transform: rotate(405deg); }
}
@-webkit-keyframes sky {
    0% { background: $daySky; }
    10% { background: $daySky; }
    50% { background: $nightSky; }
    90% { background: $daySky; }
    100% { background: $daySky; }
}
@-webkit-keyframes stars {
    0% { opacity: 0; }
    25% { opacity: 0; }
    40% { opacity: .3; }
    60% { opacity: .3; }
    75% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes sunset {
    0% { opacity: 0; }
    15% { opacity: 0; }
    25% { opacity: 1; }
    35% { opacity: 0; }
    65% { opacity: 0; }
    75% { opacity: 1; }
    85% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes sun {
    0% { background: $sun; box-shadow: 0 0 $haloSize $sun; }
    10% { background: $sun; box-shadow: 0 0 $haloSize $sun; }
    50% { background: $sunset; box-shadow: 0 0 $haloSize $sunset; }
    90% { background: $sun; box-shadow: 0 0 $haloSize $sun; }
    100% { background: $sun; box-shadow: 0 0 $haloSize $sun; }
}
@-webkit-keyframes moon {
    0% { opacity: 0; }
    25% { opacity: 0; }
    40% { opacity: 1; }
    60% { opacity: 1; }
    75% { opacity: 0; }
    100% { opacity: 0; }
}*/

html, body {
    height: 100%;
}
body {
    margin: 0;
    overflow: hidden;
}

#sky {
    position: absolute;
    width:100%; height:100%;
    background: $daySky;
    -webkit-animation: sky $cycleLength linear infinite;
}
#sky:after {
    content: '';
    position: absolute;
    width:100%; height:200%;
    background: linear-gradient(transparent 20%, orange);
    opacity: 0;
    -webkit-animation: sunset $cycleLength linear infinite;
}

#stars {
    position: absolute;
    width:100%; height:100%;
    background: url(http://upload.wikimedia.org/wikipedia/commons/2/2c/Milkyway-galaxy-sky-stars_-_West_Virginia_-_ForestWander.jpg);
...