A Pen by Bennett Feely.

index.html

<h1><span>C</span><span>S</span><span>S</span><span>&nbsp;</span><span>S</span><span>m</span><span>o</span><span>k</span><span>y</span><span>&nbsp;</span><span>T</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span><span>E</span><span>f</span><span>f</span><span>e</span><span>c</span><span>t</span></h1>

Smoky-Text.markdown

Smoky Text

Combining text-shadow and CSS transforms (especially skew) for a smoky (or smokey?) effect.

Webfont Finger Paint (http://www.google.com/fonts/specimen/Finger+Paint)

A Pen by Bennett Feely on CodePen.

License.

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Finger+Paint);

body { background: black; overflow: hidden; }

h1 {
  font: 5vw/100vh "Finger Paint";
  text-align: center;
  color: transparent;
  backface-visibility: hidden;
}

span {
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  -webkit-animation: smoky 5s both;
  animation: smoky 5s 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 21 {
  span:nth-of-type(#{$item}){ 
    animation-delay: #{($item/10)}s; 
  }
}