css3で文字にブラーイン・ブラーアウト効果をつける

css3のtransitionとtext-shadowとを合わせて文字にブラーイン・ブラーアウト効果を付けてみる．

カーソルを当てて下さい．

<style type="text/css">
#fading-text{
border:solid 1px black;
color:transparent;
text-shadow:0 0 0px black;
-moz-transition:all 3s linear 0s;
-webkit-transition:all 3s linear 0s;
-o-transition:all 3s linear 0s;
-ms-transition:all 3s linear 0s;
transition:all 3s linear 0s;
}
#fading-text:hover{
color:transparent;
text-shadow:0 0 100px black;
}
</style>

transitionでなくanimationを使っても良い．テキスト本体の色を透明に設定し，文字の本体は影で表す．この影の広がりをtransitionで広げてやることで，あたかも文字がほどける様を表現している．多少文字列の影が残ってしまうのが嫌であれば，opacity属性を加えれば良い．
delay値を適切に設定すると，一行づつ表示されていくような効果をつけることも出来る．ただ，現状ベンダープレフィクス付きの記述がいささか面倒なので，何らかのツールと合わせて利用するとよいだろう．