Smoke Font Animation

    Hello Friends, The following codes below is an animation effect of css3 by implementing

this code the fonts will comes in smoke style.

    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</sp

an><span>c</span><span>t</span></h1>

    CSS

    copytext

        @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;
                  }

    }

For more kindly visit http://findnerd.com/NerdDigest