CSSでテキストをなぞるようにアニメーションしながら色を変える | UNORTHODOX WORKBOOK | Blogなぞるようにといっても、書き順通りに文字を書いていくようなものではなくて、左から右へ徐々にスライドさせて色を変えるエフェクト。 なんと言ったらいいのかよく分からないのですが、所謂、プログレスバーのように進行しながら、徐々に色を変えていくアニメーションのやり方です。 Javascriptは利用せず、CSSだけで実装してます。JSと組み合わせればもっと色々なことできそうですが、ここでは単純にマウスホバーでアニメーションさせたものを紹介します。 デモ 以下の四角い枠内をマウスホバーしてみてください。 THE PROGRESSIVE ERA テキストの色が左から右へ徐々にスライドしながら変化しているのが分かると思います。古いブラウザには対応していませんが、最新のブラウザであれば問題なく表示できていました。 HTMLとCSS やり方は至って簡単。 HTML <p class="text-progre
