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

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

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

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

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

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

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

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等を仮で入れています。
幅を指定しないと今回の文字数では画面が大きい場合に２つの要素だけでは空白が多くなりすぎてしまいます。
ループさせる内容等に応じて適宜調節が必要な部分です。

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

今すぐ使えるCSSレシピブック