scriptを使わず、CSS3と画像だけで、テキストの見た目にアニメーション効果を付加しています。対応は、webkit系のみです。効果は白とオレンジ色に塗り分けたpng画像(オリジナルのまま)を動かして、横にした理髪店のサインポールのような効果を出しています。この画像を替えることで雰囲気の違う効果が出せそうです。
CSSソース
#sample 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, 0.5);
	background: url(img/animated_text_fill.png) repeat-y;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: aitf 80s linear infinite;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	}

Spice up your type with CSS Animated text — no JavaScript required —

※参照元:http://codepen.io/zitrusfrisch/pen/fjbal
戻るボタン