<article></article>
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&display=swap');

body {
  background: #a00;
}

article {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 10vmin 'Bowlby One SC';
  height: 1em;
  line-height: 1em;
  clip-path: polygon(-200% 0, 200% 0, 200% 100%, -200% 100%);
  color: #fff;
}

article::before {
  content: "BE";
  display: inline-block;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
}

@keyframes changeToGray {
  0% { color: #fff; }
  100% { color: #ccc; }
}

@keyframes showWords {
  0% { transform: translateY(0); }
  100% { transform: translateY(-76em); }
}

article::after {
  content: "LOVED\a HOPE\a THERE\a TOUGH\a NOW\a FRIEND\a QUICK\a ALLY\a SAD\a HAPPY\a WISE\a GENTLE\a GOOD\a MODEST\a BRIGHT\a HUMBLE\a NAIVE\a LOYAL\a CASUAL\a GULLIBLE\a SHY\a BLUNT\a PROUD\a PATIENT\a ABLE\a FUN\a SERIOUS\a TRUTH\a RAIN\a FEARLESS\a FRANK\a FIT\a CRAFTY\a TIMID\a EAGER\a HUMAN\a GOD\a BOLD\a WORTH\a FRUGAL\a FIRST\a ONE\a HONOR\a ACTIVE\a NOISY\a SUAVE\a DIRECT\a LIVELY\a MORAL\a LAST\a ALERT\a CANDID\a DARING\a NICE\a SMART\a SILLY\a BIG\a SMALL\a AWARE\a WARM\a NEAT\a CALM\a TENDER\a CARING\a HONEST\a STRONG\a WITTY\a HELP\a CLEVER\a POLITE\a THEM\a HER\a HIM\a FAIR\a KIND \a YOU\a LOVED";
  animation: 
    showWords 16s 2.5s cubic-bezier(0.30, 0, 0.70, 1.025) forwards,
    changeToGray 1s 1s forwards,
    changeToGray 2s 18.5s reverse forwards;
  display: inline-block;
  float: left;
  white-space: pre;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.