【サンプルコードあり】テキストが右から左に流れてループするcssアニメーションの作り方について解説！

2020年4月24日 2022年6月3日

テキストが右から左に流れてくるアニメーションって、サイトに動きをつけるのならば定番だと思ってるんですが、意外とサイトで実装している人が少ないので、紹介しておきます。

自分のサイトに動きをつけてみたい！とお考えの方は是非参考にしてください。

1 ソースコード
- 1.1 まずはHTML
- 1.2 続いてCSS

ソースコード

まずはHTML

<div class="animation_text">
   <p class="news_test">ここに文字を入れると流れていくよ</p>
</div>

<p class="news_test">ここに文字を入れると流れていくよ</p>

</div>

続いてCSS

.animation_text{
	background-color:#2d2d2d;
	overflow:hidden;
}
.news_test{
	display : inline-block;
	color:#ff8000;
	white-space : nowrap;
	animation : text_scroll 20s linear infinite;
	padding-left:100%;
}
@keyframes text_scroll{
   0% { transform: translateX(0)}
   100% { transform: translateX(-100%)}
}

.animation_text{

background-color:#2d2d2d;

overflow:hidden;

}

.news_test{

display : inline-block;

color:#ff8000;

white-space : nowrap;

animation : text_scroll 20s linear infinite;

padding-left:100%;

}

@keyframes text_scroll{

0% { transform: translateX(0)}

100% { transform: translateX(-100%)}

}

上記CSSの10行目の20sは、流れ終わるまでの秒数を指定してください。

秒数を好みに設定して動作させると、こういうイメージで動きます。

See the Pen CSS3 Timeline by raserase (@raserase) on CodePen.

(設定上、上記CSSで設定している秒数と上のアニメーション表示は異なる場合があります。ご了承ください。)

背景を黒、文字をオレンジにして、新幹線の車内で流れている電光掲示板ニュース風にしてみました！🚄

私のサイトでも、注目記事のお知らせ等でこのデザインを使っています。オシャレです🐹

動きのあるサイトを作りたい方は、是非上記方法で試してみてください！！