Text Animation Using CSS and JavaScript

body { background:#fff; font-family:'Arapey', Arial, sans-serif; color:#000; }
.letter-container { margin:20px; padding:40px 10px; text-align:center; font-family:'Arapey', Arial, sans-serif; }
.letter-container h2{ text-align:center; position:relative; height:180px; width:800px; display:inline-block; }
.letter-container h2 a{ text-align:center; text-transform:uppercase; font-size:150px; position:absolute; width:800px; height:180px;
top:0px; left:50%; margin-left:-400px; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear;
-ms-transition:all 0.3s linear; transition:all 0.3s linear; color:#fff; }
.letter-container h2 a:nth-child(2){ opacity:0; }
.letter-container h2 a span{ display:inline-block; position:relative; width:120px; margin:0px; background:#F00; -webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -ms-transition:all 0.3s linear; transition:all 0.3s linear;
text-shadow:2px 2px 2px rgba(0,0,0,0.6), 1px 1px 2px rgba(0,0,0,0.4), 0px 0px 2px rgba(255,255,255,0.9); }
.letter-container h2 a span:nth-child(odd), .letter-container h2 a span.char1{ -webkit-transform:skewY(10deg); -moz-transform:skewY(10deg);
-o-transform:skewY(10deg); -ms-transform:skewY(10deg); transform:skewY(10deg); background:#a50000; -webkit-box-shadow:0px 3px 5px rgba(0,0,0,0.3);
-moz-box-shadow:0px 3px 5px rgba(0,0,0,0.3); box-shadow:0px 3px 5px rgba(0,0,0,0.3); z-index:10; }
.letter-container h2 a span:nth-child(even), .letter-container h2 a span.char2{ -webkit-transform:skewY(-10deg); -moz-transform:skewY(-10deg);
-o-transform:skewY(-10deg); -ms-transform:skewY(-10deg); transform:skewY(-10deg); background:#F00; -webkit-box-shadow:0px 3px 5px rgba(0,0,0,0.3);
-moz-box-shadow:0px 3px 5px rgba(0,0,0,0.3); box-shadow:0px 3px 5px rgba(0,0,0,0.3); z-index:10; }
.letter-container h2:hover a:nth-child(1){ opacity:0; -ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=90); }
.letter-container h2:hover a:nth-child(2){ opacity:1; -ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=90)"; filter:alpha(opacity=90); }
.letter-container h2:hover a span{ -webkit-transform:skewY(0deg); -moz-transform:skewY(0deg); -o-transform:skewY(0deg); -ms-transform:skewY(0deg);
transform:skewY(0deg); background:#007bc9; }
.letter-container h2 a span:hover{ color:#FF0; }

<div class="container"><div id="letter-container" class="letter-container"><h2>
------------------------------------------- JAVASCRIPT ------------------------------------

<script type="text/javascript">
(function($){
function injector(t, splitter, klass, after) {
var a = t.text().split(splitter), inject = '';
if (a.length) {
$(a).each(function(i, item) {
inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;
});
t.empty().append(inject);
}
}
var methods = {
init : function() {

return this.each(function() {
injector($(this), '', 'char', '');
});
},
words : function() {
return this.each(function() {
injector($(this), ' ', 'word', ' ');
});
},
lines : function() {
return this.each(function() {
var r = "eefec303079ad17405c889e092e105b0";
injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
});
}
};
$.fn.lettering = function( method ) {
if ( method && methods[method] ) {
return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
} else if ( method === 'letters' || ! method ) {
return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
}
$.error( 'Method ' + method + ' does not exist on jQuery.lettering' );
return this;
};
})(jQuery);
</script>

<script type="text/javascript">
$(function() {
$("#letter-container h2 a").lettering();
});
</script>