【CSS】文字の無限スクロールアニメーション

はじめに

よくある文字が右から左に、左から右に無限スクロールしているアニメーションをつくった

参考サイト

以下のサイトの考え方を参考
https://note.com/smatsune/n/n25d5cfb2c42d

コード

See the Pen Untitled by MASA (@cats-park) on CodePen.

注意点

テキストは表示領域より大きくないと、空白ができてしまう

iPhoneとかだとアニメーションの繰り返し時に一瞬ちらつく
delayを0.1s入れるとそれが消える。。。
以下、参考
https://qiita.com/OnederAppli/items/a69741aa0df3f942dbc3

おまけ

jsを使用してHTMLに文字をたくさん書かなくていいやりかた

See the Pen Untitled by MASA (@cats-park) on CodePen.

最後に

無限スクロールを調べるとめっちゃテキストを配置してゆっくりスクロールして実質無限スクロール見たいのが結構多くて嫌だったのでちゃんと無限スクロールできるやつ作った