【CSS】アニメーションを無限ループさせる方法

ウェブデザインやフロントエンドの演出で欠かせないのが「CSSアニメーション」。
写真や文字、図形をアニメーションさせると、サイトに動きをつけることができ、ユーザーの目を引きやすくなります。
今回は、CSSアニメーションを無限に繰り返す方法について、コード例を交えながらわかりやすく解説していきます。

無限ループさせる方法

CSSアニメーションを無限に繰り返したい場合、animation-iteration-count に infinite を指定するだけでOKです。

.my-element {
  animation: myAnimation 3s infinite;
}

実例コードの解説

ここでは、「フェードイン→フェードアウト」を繰り返すシンプルなサンプルを紹介します。

まずはアニメーション名を fadeInOut とし、要素の透明度（opacity）を変化させてみましょう。

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;   /* 完全に透明 */
  }
  50% {
    opacity: 1;   /* 不透明 */
  }
}

次に、要素に対して無限ループさせる設定を行います。

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  /* 2秒かけてフェードイン・フェードアウトをinfinite（無限）に繰り返す */
  animation: fadeInOut 2s infinite;
}

このコードでは、.box クラスの要素が、2秒ごとに「透明 → 不透明 → 透明」を繰り返します。

まとめ

CSSアニメーションを無限に繰り返す方法は、とても簡単です。
animation-iteration-count に infinite を指定するだけで、エンドレスにループするアニメーションが作れます。