html,
body {
  height: 100%;
  width: 100%;
}

/* Via Cody Curley https://codepen.io/codycurley/pen/bdqevE */
.l {
  animation: fade-in-out 15s ease;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  background-color: #fcc;
  background-image: linear-gradient(to right, #fcc, #f00);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.r {
  animation: fade-out-in 10s ease;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  background-color: #f9c;
  background-image: linear-gradient(to right, #f9c, #fcc);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -2;
}

@keyframes fade-in-out {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fade-out-in {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}