I am trying to get an animation, like the one at http://tympanus.net/Tutorials/TypographyEffects/index6.html
But for some reason it is not animating at all. Is there any fix for this? My code is
<DOCTYPE html>
<html>
<head>
<title> Saturday Night Live </title>
<style>
body {
background-image: url('http://images.fanpop.com/images/image_uploads/SNL-Wallpaper-saturday-night-live-784022_1024_768.jpg');
background-size: cover;
}
.letter-container h2 a{
text-align: justify;
float: right;
margin-right: 100px;
font-size: 130px;
line-height: 160px;
display: block;
padding-bottom: 30px;
color: #fff;
cursor:default;
text-decoration: none;
}
.letter-container h2 a span {
color: #000;
opacity: 1;
text-decoration: none;
transition: all 0.3s linear;
animation: sharpen 0.9s linear backwards;
}
.letter-container h2 a span:nth-child(1) {
animation-delay: 0s;
}
.letter-container h2 a span:nth-child(2) {
animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
animation-delay: 0.2s;
}
.letter-container h2 a span:nth-child(4) {
animation-delay: 0.3s;
}
.letter-container h2 a span:nth-child(5) {
animation-delay: 0.4s;
}
.letter-container h2 a span:nth-child(6) {
animation-delay: 0.5s;
}
.letter-container h2 a span:nth-child(7) {
animation-delay: 0.8s;
}
.letter-container h2 a span:nth-child(8) {
animation-delay: 0.9s;
}
.letter-container h2 a span:nth-child(9) {
animation-delay: 0.10s;
}
.letter-container h2 a span:nth-child(10) {
animation-delay: 0.11s;
}
.letter-container h2 a span:nth-child(11) {
animation-delay: 0.12s;
}
.letter-container h2 a span:nth-child(12) {
animation-delay: 0.13s;
}
.letter-container h2 a span:nth-child(13) {
animation-delay: 0.14s;
}
.letter-container h2 a span:nth-child(14) {
animation-delay: 0.15s;
}
.letter-container h2 a span:nth-child(15) {
animation-delay: 0.16s;
}
.letter-container h2 a span:nth-child(16) {
animation-delay: 0.17s;
}
.letter-container h2 a span:nth-child(17) {
animation-delay: 0.18s;
}
@keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
100% {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
}
}
@-moz-keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
100% {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
}
}
@-webkit-keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
100% {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
}
}
@-ms-keyframes sharpen {
0% {
opacity: 0;
text-shadow: 0px 0px 100px #fff;
color: transparent;
}
90% {
opacity: 0.9;
text-shadow: 0px 0px 10px #fff;
color: transparent;
}
100% {
color: #fff;
opacity: 1;
text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
}
}
</style>
</head>
<body>
<div id="letter-container" class="letter-container">
<h2><a href="#"><font color="red">S</font>aturday <br/> <font color="red">N</font>ight <br/> <font color="red">L</font>ive</a></h2>
</div>
</body>
</html>
Sorry for it being so long, most of it is just repetitive. Thank you!