【CSS】文字のスクロール<marquee>をCSSアニメーションで実装する

前回の<blink>と同様に、i-mode全盛期くらいまで大活躍していたのが、文字のスクロールをさせる<marquee>です。これも<blink>と同じように、現在廃止中です。ブラウザによってはまだ使えるものもありますが、今後使えなくなると思ったほうがいいと思います。

でも<blink>のときのように、もしかしたら、どうしても文字をスクロールしたい!と思うときが来るかもしれません。

そんなときもCSSアニメーションを使って対応できます。

<marquee>は、HTMLタグなので、こんな感じで使えました。

CSSで実装するにあたって、こんな感じでHTMLを作ってみました。

CSSの設定は

こんな感じで<marquee>っぽい動きを再現することができます。
再現した結果は↓

この文は右から左にスクロールします

実際に使うときは、装飾をしてあげるとそれっぽくなるんじゃないでしょうか。