Анимационное заполнение текста используя CSS

Анимация заполнения текста происходит благодаря загрузке фонового изображения. Сменить изображение которое заполняет текст можно изменив свойства p span, указав в background ссылку на новое изображение.

Эффект анимации достигается благодаря использованию только CSS свойств, что дает возможность достаточно легко изменять стили под себя.

HTML

<!-- Google Font -->
<link href="http://fonts.googleapis.com/css?family=Oswald:700|Neuton" rel="stylesheet" type="text/css">
<p>Spice up your type with CSS <span>Animated text fill</span> &mdash; no JavaScript required &mdash;</p>

CSS

body { font: 400 1em/1.5 "Neuton"; background: #090d00; color: rgba(255,255,255,.25); text-align: center; margin: 0 }

p {
 text-transform: uppercase;
 letter-spacing: .5em;
 display: inline-block;
 border: 4px double rgba(255,255,255,.25);
 border-width: 4px 0;
 padding: 1.5em 0em;
 position: absolute;
 top: 18%;
 left: 50%;
 width: 40em;
 margin: 0 0 0 -20em;
}

p span {

 font: 700 4em/1 "Oswald", sans-serif;
 letter-spacing: 0;
 padding: .25em 0 .325em;
 display: block;
 margin: 0 auto;
 text-shadow: 0 0 80px rgba(255,255,255,.5);

/* Clip Background Image */

 background: url(http://f.cl.ly/items/010q3E1u3p2Q0j1L1S1o/animated_text_fill.png) repeat-y;
 -webkit-background-clip: text;

/* Animate Background Image */

 -webkit-text-fill-color: transparent;
 -webkit-animation: aitf 80s linear infinite;

/* Activate hardware acceleration for smoother animations */

 -webkit-transform: translate3d(0,0,0);
 -webkit-backface-visibility: hidden;
}

/* Animate Background Image */

@-webkit-keyframes aitf {
 0% { background-position: 0% 50%; }
 100% { background-position: 100% 50%; }
}