<div id="animationWrapper">
     <a href="/">
      <span class="span1">Only</span>
      <span class="span2">Free</span>
      <span class="span3">uCoz</span>
      <span class="span4">Templates</span>
     </a>
</div>

/* entire wrapper */
#animationWrapper  {
     width:300px;
     font-family:"proxima-nova-1","proxima-nova-2","Helvetica Neue","Arial",sans-serif;
     background:#222;
     padding:40px;
}

/* link which encapsulates SPANs */
#animationWrapper a {
     font-weight: 800;
     text-transform: uppercase;
     font-size: 42px;
     line-height: 0.9em;
     margin-bottom: 10px;
     display: block;
     position: relative;
     color: #E58;
     text-decoration: none
}

/* span and a - "workers" */
#animationWrapper a, #animationWrapper span {
     -webkit-transition: all 0.12s ease-out;
     -moz-transition: all 0.12s ease-out;
     -o-transition: all 0.12s ease-out;
     -ms-transition: all 0.12s ease-out;
     transition: all 0.12s ease-out;
}

#animationWrapper span {
     display: block;
     color: #555;
     text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black;
}

/* special size for the first item */
#animationWrapper .span1 {
     font-size: 76px;
     line-height: 0.8em;
}

#animationWrapper a:hover {
       color: #fff ;
       top: -3px;
       left: -3px;
}

/* all spans become white */
#animationWrapper a:hover span {
     color:#fff;
}

/* different colors for each SPAN */
#animationWrapper a:hover .span1 {
       text-shadow: 1px 1px #58E, 2px 2px #58E, 3px 3px #58E, 4px 4px #58E, 5px 5px #58E, 6px 6px #58E, 7px 7px #58E, 8px 8px #58E, 9px 9px #58E, 10px 10px #58E, 11px 11px #58E;
}

#animationWrapper a:hover .span2 {
       text-shadow: 1px 1px #F90, 2px 2px #F90, 3px 3px #F90, 4px 4px #F90, 5px 5px #F90, 6px 6px #F90, 7px 7px #F90, 8px 8px #F90, 9px 9px #F90, 10px 10px #F90, 11px 11px #F90;
}

#animationWrapper a:hover .span3 {
       text-shadow: 1px 1px #3C7, 2px 2px #3C7, 3px 3px #3C7, 4px 4px #3C7, 5px 5px #3C7, 6px 6px #3C7, 7px 7px #3C7, 8px 8px #3C7, 9px 9px #3C7, 10px 10px #3C7, 11px 11px #3C7;
}

#animationWrapper a:hover .span4 {
       text-shadow: 1px 1px #E58, 2px 2px #E58, 3px 3px #E58, 4px 4px #E58, 5px 5px #E58, 6px 6px #E58, 7px 7px #E58, 8px 8px #E58, 9px 9px #E58, 10px 10px #E58, 11px 11px #E58;
}