JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

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

CSS

#sky {
    width:600px;
    height:400px;
    animation-duration: 20s;
    animation-name: daynight;
    animation-iteration-count: infinite;
}

@keyframes daynight {
  0% {
    background: linear-gradient(to bottom, hsl(200, 80%, 60%), hsl(220, 80%, 50%));
  }
  /* dusk */
  25% {
    background: linear-gradient(to bottom, hsl(120, 80%, 60%), hsl(140, 80%, 50%));
  }
  /* midnight */
  50% {
    background: linear-gradient(to bottom, hsl(220, 80%, 60%), hsl(240, 80%, 50%));
  }
  /*dawn */
  75% {
    background: linear-gradient(to bottom, hsl(200, 80%, 60%), hsl(220, 80%, 50%));
  }
  100% {
    background: linear-gradient(to bottom, hsl(200, 80%, 60%), hsl(220, 80%, 50%));
  }
}