webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

【css】テキストを右から左に流すアニメーション

テキストを右から左に流すアニメーション
この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき
  • 小4・年長の母

今日は、テキストを右から左に動かすcssアニメーションを見てみませう。

ちょっとしたお知らせなどを流す時に使ったりされていますよね^^

cssのアニメーションを使う

テキストを流していますよー٩( ᐛ )و xxxx.xx.xx

<div class="txt_anime">
  <p>テキストを流していますよー٩( ᐛ )و </p>
</div>
.txt_anime {
  width: 100%;
  height: 100px;
  line-height:100px;
  overflow: hidden;
  background:white;
}

.txt_anime p {
  animation: animetxt 20s linear infinite;
  transform: translateX(100%);
}

@keyframes animetxt {
100% {
  transform: translateX(-100%);
 }
}
【css】テキストを右から左に流すアニメーション

transformは動かしたい時に使うという認識でOKです。

translateXはX軸方向(水平方向)を意味します。

translateX(0)を元の位置と考えると分かりやすくて、translateX(100%);は右に100%行った場所ということです。

そこから、20秒かけてtranslateX(-100%);の位置まで動かすという書き方ですね^^

秒数は好きに変えてくださいね♫

animationをinfiniteとすることで、永遠に繰り返されます。わたし

永遠に繰り返されると聞くとなんか怖いですね(笑)

いいなと思ったら
TAPしてね♡↓

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング コピペ用コード 【css】テキストを右から左に流すアニメーション

関連記事

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

(更新通知以外のメールは
お送りしませんので
ご安心ください)