Text Shadow fade in from nothing effect

Text from out of fuggin' nowhere!

by Steven Senkus

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<h1>Hello, text-shadow<i>!</i></h1>

CSS

body{ 
    background-color: #000;
    text-align: center;
    color: #fff;
    max-height: 600px;
    max-width: 400px;
}
h1 {
    text-shadow: 0px 0px 0.02em #000;
    margin: 20px auto;
    transition: all 0.3s linear;
    color: rgba(0,0,0,0);
    opacity: 1;
    font-size: 30px;
    font-weight:bold;
}

.shadow {
    text-shadow: 20px 20px 0px #d00;
}

.rotate {
    
    transform: scale(1.5,3)
   
}

JavaScript

var i = 0.01;
var $el = $('h1')
var timer = setInterval(function() {
    $el.toggleClass('shadow');
    $el.toggleClass('rotate');
}, 1000)