2020年2月1日TwitterFacebookB!HatenaPocketLINELINERSSCopy以前「CSSを使ってボックスの内容をスクロールさせる方法」を書きました。...https://kirari-yums.net/2019/08/05/post-9307/この方法では見ている人が自分でスクロールさせないと内容を見ることが出来ません。文字が自動で流れるようにできないかな~こんな風に思っていました。そこで今回は「CSSを使って流れるテキスト」に挑戦してみたいと思います。CSSだけで動きをつけることできるの?結耶うん。プロパティCSSの15行目のanimationでテキストの動きを指定しています。要素に適用される1つまたは複数のアニメーションを設定します。@-規則を設定します。名前には英文字(大文字、小文字)、数字、「-(ハイフン)」、「_(アンダーバー)」を使用してつけます。個別に指定する場合はanimation-nameを使います。docs様)を参考にしてください。時間1回のアニメーションの周期が完了するまでの時間。時間は秒(s)またはミリ秒(ms)で指定します。時間の値は正数で指定します。※時間を「0s」と指定するとアニメーションは実行しないという意味になります。個別に指定する場合はanimation-durationを使います。タイプアニメーションのタイプを指定します。タイプの値easeアニメーションの変化量が中央に向かって増加し、最後に向かって減少するlinear同じ速度でアニメーションするease-inアニメーションの変化がゆっくり始まり、終わるまで加速するease-outアニメーションの変化量が速く始まり速度を落としていくease-in-outアニメーションの変化がゆっくり始まり、加速してまた速度落としていく個別に指定する場合はanimation-timing-functionを使います。再生回数アニメーションの再生回数回数を指定します。再生回数の値infiniteアニメーションを無限に繰り返します。数値アニメーションを繰り返す回数を指定。「0.5」などの非整数で指定すると途中から再生できます。個別で指定する場合はanimation-iteration-countを使います。※animationについては下記を参考にさせていただきました。スタイル設定を別の設定へ遷移させることを可能にします。https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations...transform:translatetransform:translateで要素(テキスト)の位置を指定しています。Y方向の位置);transform:translateX(X方向の位置);transform:translateY(Y方向の位置);X方向が横、y方向は縦となります。単位はpx(ピクセル)や%(パーセント)で指定します。スポンサーリンクサンプルその他の流れるテキストのサンプルです。同じページに違う動きのアニメーションを使う場合には、「クラス名」と「キーフレーム名」を変更してください。HTMLに箇条書きのul、liを使うんだね。行(文字列)を1つにすれば1行で流れるし、もちろん方向を変えれば縦方向にも流すこともできるよ!※こちらは以下の記事を参考にさせていただきました。NOTESCSSだけで流れる文字を作成するCSSアニメーションサンプルパターン集になります。...https://webparts.cman.jp/string/scroll/結耶animationを使えばいろいろなアニメーションができます。画像や背景色を変えることもできます。挑戦してみてください。画像も流せる上記ではテキストを流していますが、テキストだけではなく画像も流すことが出来ます。