@import url(https://fonts.googleapis.com/css?family=Rancho);

html, body {
  background: black;
  overflow: hidden;
  font: 10vw/90vh 'Rancho';
  text-align: center;
  color: transparent;
  backface-visibility: hidden;
}

span {
  display:inline-block;
  text-shadow: 0 0 0 red;
  animation: smoky 8s 3s both;
}

span:nth-child(even) {
  animation-name: smoky-mirror;
}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg)
      scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg)
      scale(2);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@for $item from 1 through 13 {
  span:nth-of-type(#{$item}) {
    animation-delay: #{(2 + ($item/10))}s;
  }
}