<div id="linear">Linear</div>
<div id="scrim">Scrim</div>
<div id="ease">EaseOutSine</div>

@use postcss-cssnext;
:root {
  --the-linear-gradient: linear-gradient(black, transparent);
  --the-scrim-gradient: scrim-gradient(black, transparent);
  --the-ease-gradient: ease-out-sine-gradient(black, transparent);
  --animation-duration: 6s;
  --scrim-height: 30vmin;
}

/* 
scrim-gradient is processed into: 
linear-gradient(
  hsl(0, 0%, 0%) 0%,
  hsla(0, 0%, 0%, 0.738) 19%,
  hsla(0, 0%, 0%, 0.541) 34%,
  hsla(0, 0%, 0%, 0.382) 47%,
  hsla(0, 0%, 0%, 0.278) 56.5%,
  hsla(0, 0%, 0%, 0.194) 65%,
  hsla(0, 0%, 0%, 0.126) 73%,
  hsla(0, 0%, 0%, 0.075) 80.2%,
  hsla(0, 0%, 0%, 0.042) 86.1%,
  hsla(0, 0%, 0%, 0.021) 91%,
  hsla(0, 0%, 0%, 0.008) 95.2%,
  hsla(0, 0%, 0%, 0.002) 98.2%,
  hsla(0, 0%, 0%, 0) 100%
);

ease-out-sine-gradient is processed into:
linear-gradient(
  hsl(0, 0%, 0%) 0%,
  hsla(0, 0%, 0%, 0.917) 5.3%,
  hsla(0, 0%, 0%, 0.834) 10.6%,
  hsla(0, 0%, 0%, 0.753) 15.9%,
  hsla(0, 0%, 0%, 0.672) 21.3%,
  hsla(0, 0%, 0%, 0.591) 26.8%,
  hsla(0, 0%, 0%, 0.511) 32.5%,
  hsla(0, 0%, 0%, 0.433) 38.4%,
  hsla(0, 0%, 0%, 0.357) 44.5%,
  hsla(0, 0%, 0%, 0.283) 50.9%,
  hsla(0, 0%, 0%, 0.213) 57.7%,
  hsla(0, 0%, 0%, 0.147) 65%,
  hsla(0, 0%, 0%, 0.089) 72.9%,
  hsla(0, 0%, 0%, 0.042) 81.4%,
  hsla(0, 0%, 0%, 0.011) 90.6%,
  hsla(0, 0%, 0%, 0) 100%
);
*/

div {
  opacity: 0;
  animation: displayMe;
  animation-duration: var(--animation-duration);
  animation-iteration-count: infinite;

  &, &:before {
    position: absolute;
    left: 0;
    width: 100%;
  }

  &:before {
    content: '';
    opacity: 1;
    z-index: -1;
    height: var(--scrim-height);
  }
}

@keyframes displayMe {
  0% { opacity: 1 }
  33.33% { opacity: 1 }
  33.66% { opacity: 0 }
}

#linear {
  &:before {
    background-image: var(--the-linear-gradient);
  }
}

#scrim {
  animation-delay: calc(var(--animation-duration) / 3);
  &:before {
    background-image: var(--the-scrim-gradient);
    height: calc(var(--scrim-height) * 1.3);
  }
}

#ease {
  animation-delay: calc(var(--animation-duration) / 3 * 2);
  &:before {
    background-image: var(--the-ease-gradient);
    height: calc(var(--scrim-height) * 1.6);
  }
}

@font-face {
  font-family: Montserrat;
  font-weight: 400;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/256812/Montserrat-Regular.woff);
}

body {
  position: relative;
  height: 100vh;
  max-height: 80vw;
  font-family: Montserrat;
  font-size: 13vmin;
  letter-spacing: -0.04em;
  text-align: center;
  line-height: 2;
  color: white;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/256812/goodbaduglyend.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}