PC・Web

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

2020年4月24日

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

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

ソースコード

まずはHTML

続いてCSS

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

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

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

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

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

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

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

PR

-PC・Web
-, ,

© 2024 アプリめし