CSSアニメーションを無限ループさせる方法！animation-iteration-countの使い道

無限ループするアニメーション（animation-iteration-count: infinite）

先生と生徒の会話形式で理解しよう

生徒

「ホームページのボタンをずっとピコピコ動かしたり、画像をくるくる回し続けたりしたいのですが、どうすればいいですか？」

先生

「それはCSSアニメーションの無限ループという機能を使えば実現できますよ。animation-iteration-countという設定を使うのがポイントです。」

生徒

「難しそうな名前ですね。プログラミングをやったことがない私でも設定できるでしょうか？」

先生

「大丈夫です。仕組みさえ分かれば、英単語を一つ覚えるのと同じくらい簡単ですよ。具体的な書き方を一緒に学んでいきましょう！」

1. CSSアニメーションの無限ループとは何か

ウェブサイトを見ていると、広告がずっと動いていたり、背景の雲がゆっくりと流れ続けていたりすることがありますよね。これらは、特定の動きを何度も繰り返すように設定されています。これをプログラミングの用語で「無限ループ」と呼びます。

通常、アニメーションは一回動いたら止まってしまいますが、CSSというデザインを指定する言語を使うと、「ずっと繰り返してね」と命令を出すことができます。これによって、ユーザーの目を引く動きを作ったり、サイトに賑やかさを加えたりすることが可能になります。

パソコンを初めて触る方にとって「命令」と聞くと難しく感じるかもしれませんが、要するに「この動きを何回やるか」を指定するだけの作業です。その回数を「無限」に設定することで、ページが開いている間はずっと動き続ける仕掛けが完成します。

2. animation-iteration-countという魔法の言葉

アニメーションの回数を決めるために使うのが「animation-iteration-count」というプロパティです。プロパティとは、設定項目の名前のようなものだと考えてください。例えば、「車の色」という項目に対して「赤」と答えるように、「アニメーションの回数」という項目に対して「無限」と答えるイメージです。

この名前を分解してみましょう。「animation」はアニメーション、「iteration」は反復や繰り返し、「count」は回数を意味します。つまり、直訳すると「アニメーションを繰り返す回数」という意味になります。そのままの名前なので、一度覚えてしまえば忘れることはありません。

初心者のうちは、この長い英単語をすべて暗記する必要はありません。まずは「回数を決めるための呪文があるんだな」くらいの認識で十分です。実際に使うときは、コピーして貼り付けるだけで誰でも動かすことができます。

3. 無限を意味するキーワードはinfinite

「animation-iteration-count」に対して、具体的にどのような値を設定すれば無限に動き続けるのでしょうか。答えは「infinite」という言葉です。これは英語で「無限の」という意味を持つ単語です。

もしここに数字の「1」を書けばアニメーションは1回で止まり、「5」を書けば5回動いて止まります。しかし、「infinite」と記述することで、終わりがない永遠の繰り返しを実現できるのです。これはCSSアニメーションの中でも非常によく使われるテクニックの一つです。

例えば、読み込み中のぐるぐる回るアイコンなどは、この設定が使われている代表的な例です。いつ終わるかわからない処理を待っている間、ユーザーに「動いていますよ」と伝えるために無限ループは欠かせない存在となっています。

4. 実際に文字を点滅させてみよう

まずは、簡単な例として文字を点滅させるプログラムを見てみましょう。透明度を変化させることで、文字が消えたり現れたりする動きを作ります。ここでは「@keyframes」というものを使って動きの内容を決め、それを無限に繰り返すように指定します。

「@keyframes」は、アニメーションの「台本」のようなものです。0パーセントのときはこの状態、100パーセントのときにはこの状態、というふうに時間の経過に合わせた変化を書き込みます。その台本を「無限に再生してね」と指示するのが今回の主役です。


<style>
	.blink-text {
	    animation-name: fade;
	    animation-duration: 2s;
	    animation-iteration-count: infinite;
	}

	@keyframes fade {
	    0% {
	        opacity: 1;
	    }
	    50% {
	        opacity: 0;
	    }
	    100% {
	        opacity: 1;
	    }
	}
</style>

<p class="blink-text fw-bold text-danger">この文字は永遠に点滅し続けます！</p>

ブラウザ表示

5. 画像をゆっくり回転させ続ける方法

次に、画像をくるくると回転させる方法を解説します。これはロゴマークを強調したいときや、楽しい雰囲気を演出したいときに非常に効果的です。角度を指定する「rotate」という命令を使い、0度から360度まで回転させる台本を作ります。

画像の回転をスムーズに見せるためには、時間の長さを指定する「animation-duration」という項目も重要です。ここを短い時間にすれば速く回り、長い時間にすればゆっくり回ります。無限ループと組み合わせることで、扇風機の羽のような動きも作ることができます。

初心者の方は、まずこのコードをコピーして、数字の部分を書き換えて遊んでみてください。数字を大きくしたり小さくしたりすることで、動きがどう変わるかを体感するのが上達の近道です。


<style>
	.rotate-img {
	    animation-name: spin;
	    animation-duration: 5s;
	    animation-timing-function: linear;
	    animation-iteration-count: infinite;
	}

	@keyframes spin {
	    from {
	        transform: rotate(0deg);
	    }
	    to {
	        transform: rotate(360deg);
	    }
	}
</style>

<div class="text-center">
	<img src="/img/sample120-120.jpg" alt="回転する画像" class="rotate-img rounded-circle">
	<p>画像がずっと回り続けます。</p>
</div>

ブラウザ表示

6. ふわふわと浮いているような動きを作る

無限ループは、何も激しい動きだけではありません。上下に少しだけ揺らすことで、水面に浮かんでいるような、あるいは無重力空間にいるような「ふわふわ感」を出すこともできます。これを専門用語で「フローティング効果」と言ったりします。

この動きを作るには、位置を動かす「translate」という命令を使います。少しだけ上に移動して、また元の位置に戻るという動きを無限に繰り返します。これだけで、静止画だったサイトが一気に生き生きとした表情に変わります。

ボタンにこのアニメーションをつけると、「ここを押してほしい！」という控えめなアピールになります。ユーザーに親切な設計を心がける際にも、無限ループのアニメーションは非常に役立つのです。


<style>
	.floating-box {
	    width: 150px;
	    height: 100px;
	    background-color: #007bff;
	    color: white;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    border-radius: 10px;
	    animation-name: float;
	    animation-duration: 3s;
	    animation-iteration-count: infinite;
	    animation-timing-function: ease-in-out;
	}

	@keyframes float {
	    0% {
	        transform: translateY(0px);
	    }
	    50% {
	        transform: translateY(-20px);
	    }
	    100% {
	        transform: translateY(0px);
	    }
	}
</style>

<div class="floating-box">
	ふわふわ浮くよ
</div>

ブラウザ表示

7. アニメーションを反対向きに再生する方法

無限ループをより自然に見せるテクニックとして、「animation-direction」という設定があります。これはアニメーションが最後まで行ったら、次は逆再生で戻ってくるという動きを可能にします。これを指定すると、動きのつなぎ目がスムーズになります。

例えば、先ほどの「ふわふわ」とした動きも、逆再生を組み合わせることで、より滑らかな往復運動になります。設定値に「alternate」と書くだけで、行きと帰りを交互に繰り返してくれるようになります。

無限ループ（infinite）と逆再生（alternate）を組み合わせる手法は、プロの現場でも非常によく使われます。たった一行コードを増やすだけで、アニメーションの品質がグッと上がるので、ぜひ覚えておいて損はありません。

8. 色がゆっくり変化し続ける背景

最後に応用編として、背景の色がグラデーションのようにゆっくりと変わり続けるアニメーションをご紹介します。これは、サイトの雰囲気を幻想的にしたり、モダンな印象を与えたりするのに最適です。色の指定を変えるだけで、朝焼けから夕焼けのような変化も作れます。

プログラミングの経験がない方でも、色の名前（red, blue, greenなど）を書き換えるだけで自分好みの背景を作ることができます。このように、複数の状態を無限にループさせることで、単調なウェブページを魅力的な空間へと変貌させることができるのです。


<style>
	.color-change-bg {
	    width: 100%;
	    height: 150px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-weight: bold;
	    color: white;
	    animation-name: rainbow;
	    animation-duration: 10s;
	    animation-iteration-count: infinite;
	}

	@keyframes rainbow {
	    0% {
	        background-color: #ff0000;
	    }
	    33% {
	        background-color: #00ff00;
	    }
	    66% {
	        background-color: #0000ff;
	    }
	    100% {
	        background-color: #ff0000;
	    }
	}
</style>

<div class="color-change-bg">
	背景色が変わり続けます
</div>

ブラウザ表示