morphtext.css

.morphing {
  position: relative;
  font-size: 3rem;
  font-family: poppins;
  background-color: rgba(255, 255, 255, 0.151);
  color: rgb(189, 83, 231);
  min-height: 40vh;
  filter: contrast(25) blur(0px);
}

.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: word 16s infinite ease-in-out;
}


.word:nth-child(1){
    animation-delay: -16s;
}
.word:nth-child(2){
    animation-delay: -14s;
}
.word:nth-child(3){
    animation-delay: -12s;
}
.word:nth-child(4){
    animation-delay: -10s;
}
.word:nth-child(5){
    animation-delay: -8s;
}
.word:nth-child(6){
    animation-delay: -6s;
}
.word:nth-child(7){
    animation-delay: -4s;
}
  @keyframes word {
    0%,
    5%,
    100% {
      filter: blur(0px);
      opacity: 1;
    }
    20%,
    80% {
      filter: blur(1em);
      opacity: 0;
    }
  }