.wrapper.eight {
  height: 800px;
margin-left: 100px;
margin-top: 100px;
  font-size: 6rem;
  background-color: #000000;
  overflow: hidden;
  color: transparent;
}


.eight .smoke {
  padding-top: 300px;
  margin: 3rem auto;
  display: inline-flex;
}
.eight span {
  display: inline-flex;
  text-shadow: 0 0 0 #f5f5f5;
  font-family: 'Bodoni Moda';
  animation: smoke 5s ease infinite;
}

@keyframes smoke {
  60% {

      text-shadow: 0 0 40px #f5f5f5;
      font-variation-settings: 'wght' 900, 'opsz' 46; 
  }
  to {
      transform: translate3d(12rem, -10rem, 0) skewX(50deg);
      font-variation-settings: 'wght' 900, 'opsz' 46;
      text-shadow: 0 0 20px #f5f5f5;
      opacity: 0;
  }
}

.eight span:nth-of-type(1) {
  animation-delay: 3.1s;
}
.eight span:nth-of-type(2) {
  animation-delay: 3.2s;
}
.eight span:nth-of-type(3) {
  animation-delay: 3.3s;
}
.eight span:nth-of-type(4) {
  animation-delay: 3.4s;
}
.eight span:nth-of-type(5) {
  animation-delay: 3.5s;
}

.eight span:nth-of-type(6) {
  animation-delay: 3.6s;
}

.eight span:nth-of-type(7) {
  animation-delay: 3.7s;
}

.eight span:nth-of-type(8) {
  animation-delay: 3.8s;
}