ウェブデザインやフロントエンドの演出で欠かせないのが「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秒ごとに「透明 → 不透明 → 透明」を繰り返します。
よくある質問（FAQ）
Q. CSSアニメーションを無限ループさせるにはどうすればよいですか？
A. animation-iteration-countプロパティにinfiniteを指定します。例：animation: slide 2s infinite;
Q. アニメーションの繰り返し回数を指定することはできますか？
A. はい、animation-iteration-countに数値を指定することで、繰り返し回数を制御できます。例：animation-iteration-count: 3;
Q. 無限ループ中にアニメーションを一時停止するには？
A. animation-play-stateプロパティをpausedに設定します。JavaScriptから動的に切り替えることも可能です。
まとめ
CSSアニメーションを無限に繰り返す方法は、とても簡単です。
animation-iteration-count に infinite を指定するだけで、エンドレスにループするアニメーションが作れます。
