@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab', serif;
}

.morphing {
  position: relative;
  font-size: 120px;
  background-color: #000;
  color: #fff;
  min-height: 100vh;
  filter: contrast(25) blur(1px);
}

.word {
  --duration: 16s;
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* trick: set delay on individual element using CSS variable defined in HTML
   => each element starts its own fade out delayed... */
  animation: morph var(--duration) calc( 1s * var(--delay) ) ease-in-out infinite;
}

/* fade in one word after the other 
  trick: use a combination of blur & opacity to morph words into one another... */

@keyframes morph {
  /* default: visible - for short period */
  0%, 5% {
    opacity: 1;
    filter: blur(0px);
  }
  /* now start hiding item (blur means => almost not visible due to high contrast) */
  /* from 20-80%: the word is faded out */
  /* at 80% - stop the hiding ;) .. and start transition to visibility */
  20%, 80% {
    filter: blur(1em);
    opacity: 0;
  }
  /* start fading in again towards the end! */
  to {
    opacity: 1;
    filter: blur(0px);
  }

}