テキスト背景をCSSだけでアニメーションにする簡単な方法

テキストの文字部分の背景をCSSのみでアニメーション画像にする方法がありましたのでご紹介します。現状、残念なことにwebkit系のみの対応になっていますが試してみてください。

 

▼サンプルとして「Animation Text」という文字の背景に下図の画像をアニメーションさせます。

 

 

DEMO

 

 

1.HTMLを記述

下記一行のみの記述でOKです。

 

2.CSSを記述

 backgroundに指定する背景画像は適宜変更してください。

 

これだけでOKです。

FirefoxやIEなどでは残念な表示になってしまいますが、webkit系ではきちんと表示されているかと思います。

 

アニメーションさせずに背景画像だけ表示する場合は、CSSを下記のようにすれば変更できます。

 以上になります。