<figure>
  <blockquote>
    Humans are<br/>
    allergic to 
    <span>c</span><span>h</span><span>a</span><span>n</span><span>g</span><span>e</span>
  </blockquote>
  <figcaption>
    &mdash;Grace Hopper,
    <cite>
      The Wit and Wisdom of Grace Hopper
    </cite>
  </figcaption>
</figure>

html, body {
  overflow: hidden;
}

figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr 1fr
}

figcaption {
  align-self: flex-start;
  margin-top: 5vmin;
  font-size: 3.5vmin;
  font-family: Times, serif;
}

blockquote {
  align-self: flex-end;
  margin: 0;
  line-height: 12vmin;
  font-size: 10vmin;
  font-family: Helvetica, sans-serif;
}

@keyframes changefont {
  0%   { font-weight: 400; color: #000; font-style: italic; font-family: Helvetica, sans-serif; }
  10%  { font-weight: 200; color: #333; font-style: normal; font-family: Helvetica, sans-serif; }
  20%  { font-weight: 300; color: #000; font-style: normal; font-family: Arial, sans-serif; }
  30%  { font-weight: 600; color: #666; font-style: italic; font-family: Times, serif; }
  40%  { font-weight: 300; color: #f00; font-style: normal; font-family: Times, serif; }
  50%  { font-weight: 500; color: #000; font-style: italic; font-family: Courier, monospace; }
  60%  { font-weight: 300; color: #f06; font-style: italic; font-family: Helvetica, sans-serif; }
  70%  { font-weight: 600; color: #070; font-style: normal; font-family: Times, serif; }
  80%  { font-weight: 200; color: #00f; font-style: normal; font-family: Courier, monospace; }
  90%  { font-weight: 400; color: #069; font-style: italic; font-family: Arial, serif; }
  100% { font-weight: 700; color: #fca; font-style: normal; font-family: Helvetica, sans-serif; }
}

blockquote span {
  animation: changefont 5s linear infinite;
}

blockquote span:nth-child(1) { animation-delay: -0s; }
blockquote span:nth-child(2) { animation-delay: -3.25s; }
blockquote span:nth-child(3) { animation-delay: -1s; }
blockquote span:nth-child(4) { animation-delay: -5s; }
blockquote span:nth-child(5) { animation-delay: -2.5s; }
blockquote span:nth-child(6) { animation-delay: -4.3s; }

@media (prefers-reduced-motion) {
  blockquote span {
    animation: none !important;
    font-style: italic;
    font-family: Times, serif;
    font-size: 1.1em;
  }
}