ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

CSSテキスト無限ループアニメーション

CSSだけでテキスト無限ループアニメーションさせる方法

CSSによるテキストの無限ループ アニメーションについて、備忘録として掲載しておきます。
テキストのみならず画像などでも対応可能ですので、同じような事を行いたいどなたかの参考になれば幸いです。

無限ループアニメーションの実際の動作例

まずは以下の実際の動作例を見ていきましょう。

無限ループのためには同じ要素が2つ以上複数必要になります。
ここでは分かりやすく①と②という表記を足しています。

①の後ろに②が遅れてついてきて、①が見切れたら②の後ろに移動して、②が見切れたら①の後ろに移動して…といった動作を繰り返して無限ループは出来ています。
全く同じテキストを流しておけば無限ループアニメーションになるのがお分かり頂けるでしょう。

CSS無限ループ解説

.wrapper{
  overflow: hidden;
  position: relative;
  width: 340px;
  border: 1px solid #ddd;
  margin-inline: auto;
}

.loop {
  animation: loop 10s linear infinite;
  width: 100%;
}

.loop2{
  position: absolute;
  top: 0; left: 0;
  animation: loop 10s -5s linear infinite;
}

@keyframes loop {
  0%{
    transform: translateX(100%);
  }
  100%{
    transform: translateX(-100%);
  }
}

CSSアニメーションで、animation-delayを活用し、animation-durationによる動作の半分遅延させて後続を表示させています。
animationプロパティの一括指定で10sと-5sとなっている箇所です。

アニメーション自体は@keyframesでtranslateX(100%)からtranslateX(-100%)まで変形させて動作しています。
動作後、左に見切れた要素は右側に見切れた状態で再スタートするという状態です。

また、後続の②の要素はposition: absolute;によって①と同じ場所に重ねているので、幅指定をいれておかないと要素の幅の収縮によって動作速度の差が出てしまうので注意が必要です。
そのため、widthをどちらにも指定しています。

注意点

wrapperクラスではtranslateではみ出した分を隠すためoverflow: hidden;を設定。
position: relative;で②の要素の基準位置になっています。
ここでは幅指定やborder等を仮で入れています。
幅を指定しないと今回の文字数では画面が大きい場合に2つの要素だけでは空白が多くなりすぎてしまいます。
ループさせる内容等に応じて適宜調節が必要な部分です。

場合によっては画面に同時に3つ以上表示が必要なサイズ感のループをさせる場合には、要素を増やしたりアニメーションの遅延の数値もその数に応じて調整が必要です。

まとめ

本来無限ループアニメーションを行おうとするとJavaScriptが必要になりそうではありますが、CSSだけでも今回のような無限ループアニメーションが可能です。
決まった長さ、決まった数の無限ループをCSSで手軽に行いたい場合には是非ご参考頂ければ幸いです。

動きのあるWebサイト制作には以下のような書籍を参考にすると、どんどんアイデアが実現できるので非常におすすめです。

より実践レベルの高度な動きを取り入れたい場合はこちら↓

一昔前まではあまり重い動作のサイトはモバイルなどでモッサリしてしまうこともあり注意が必要でしたが、端末の進化で現在ではそこまで気にする必要が無くなりました。
動きのあるサイトは見ているだけでも楽しくなりますし、人を惹きつけるので、積極的に取り入れていきたいですね。
是非ご参考ください。