VIDEO LESSON

CSSのanimation-iteration-countの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:54動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、アニメーション・イテレーション・カウントです。
0:08このプロパティが決めるのは、アニメーションを「何回繰り返すか」です。
0:13これまでのアニメーション関連の指定を思い出すと、動きの種類はネーム、一回分の再生時間はデュレーション、
0:20始まるまでの待ち時間はディレイ、進み方はタイミング・ファンクションが担当していました。
0:27今回はそこに「回数」が加わります。
0:29たとえば、箱がスッと右へ動く一回分の動きを、二回繰り返すのか、一度きりで終わらせるのか。
0:36それを決めるのがこのプロパティです。
0:39回数が違うだけで、動きの印象や、ユーザーが、また動いた、と気づく度合いは大きく変わります。
0:46まず「一回」の意味を確認しましょう。
0:48アニメーションの一回とは、キーフレームで定義した動きを、最初から最後まで一通り再生することです。
0:56箱が右へ移動する動きなら、元の位置から移動先までが一回分です。
1:01ここに回数が関係すると、全体の再生時間は単純な掛け算で考えられます。
1:07一回の再生が一秒で、三回繰り返せば、合計は三秒です。
1:11なお、開始までの待ち時間であるディレイは、繰り返しごとではなく、最初の再生の前に一度だけ入ります。
1:19回数を増やしても、待ち時間は増えません。
1:22逆に、回数を二回にすれば二周すると考えます。
1:26動きを確認するときは、この一周がどこからどこまでかを意識すると、回数の感覚がつかみやすくなります。
1:34書き方を確認します。
1:36対象の要素を選ぶセレクター、中括弧、プロパティ名、コロン、値、セミコロンの順に書きます。
1:43画面の例では、デモというクラスを持つ要素に、繰り返し回数として二を指定しています。
1:49これで、この要素のアニメーションは二回繰り返されます。
1:54コロンやセミコロンを落とすと、その宣言だけが無効になってしまうので注意しましょう。
2:00なお、このプロパティは単独では何も動かしません。
2:04キーフレームの名前や再生時間と組み合わせて、初めて意味を持ちます。
2:10なお、値には単位を付けません。
2:12回数そのものを、数字のまま書くのがこのプロパティの決まりです。
2:17値の基本は数字です。
2:18何も指定しなければ初期値の一が効いていて、アニメーションは一回だけ再生されて終わります。
2:24二と書けば二回、三と書けば三回、同じ動きを繰り返します。
2:28読み込み直後に少しだけ注目を集めたい動きなら、このように限られた回数を指定するのが基本です。
2:34逆にゼロを指定すると、アニメーションはまったく再生されません。
2:38動きを止めておきたいときの指定として覚えておくと便利です。
2:42単位は付けません。
2:43秒数のようなエスは不要で、回数そのものを数字で書きます。
2:47たとえば、お知らせの印を三回だけ小さく揺らして注意を引く、といった使い方です。
2:52ずっと動き続けるわけではないので、読み手の邪魔になりにくいのが、限られた回数の良さです。
2:58少し意外かもしれませんが、値には小数も書けます。
3:03たとえば二点五と指定すると、アニメーションは二回を最後まで再生し、三回目は半分まで進んだところで終了します。
3:13つまり小数は、「途中までの再生」を表す指定なのです。
3:18動きの終わり方を細かく調整したいときに使えますが、途中で止まると中途半端に見えることも多いので、
3:23使う場面は限られます。
3:29普段は整数で十分です。
3:31なお、マイナスの値は書けません。
3:34マイナスを指定した宣言は無効になります。
3:37これは、キーフレームの途中の状態でアニメーションを終わらせたい場合に意味を持つ指定です。
3:46数字の代わりに、インフィニットというキーワードも書けます。
3:50これを指定すると、アニメーションは終わることなく、ページが表示されている間ずっと繰り返されます。
3:57代表的な使い道は、読み込み中であることを伝える、ぐるぐると回り続ける表示などです。
4:03逆に言えば、インフィニットには「終わり」がありません。
4:07ユーザーの操作で止める、画面が切り替わって消えるなど、終了のタイミングは自分の設計で用意する必要があります。
4:15次の注意点にもつながるので、使いどころは選んでください。
4:19時計の針のように回り続ける表示や、読み込み中のアイコンが、その代表例です。
4:24実例で流れを確認しましょう。
4:26土台はこれまでと同じ、箱が右へ一レム移動するスライドインというキーフレームです。
4:33下の指定では、この動きを一秒かけて、〇・三秒の遅延のあと、一回だけ再生するよう設定しています。
4:41そして最後の行で、繰り返し回数を二に上書きしています。
4:45その結果、〇・三秒待ったあと、一秒の動きが二回、合計二秒間再生されます。
4:51記事のサンプルはページの再読み込みで最初から試せますので、まず二回繰り返す様子を目で追ってみてください。
4:59ポイントは、一括指定の中にある一が、もともとの回数で、直後の個別指定がそれを上書きしていることです。
5:07それから保存して、ブラウザーを再読み込みします。
5:11では値だけを一に変えてみます。
5:14動き自体は同じですが、再生は一回で終わり、全体の時間も一秒だけになります。
5:19二回繰り返したときと比べると、あっさりと感じるはずです。
5:23このように、繰り返すことで印象の強さを調整できるのが、回数指定の役割です。
5:29ここでも注意は順番です。
5:31一括指定のアニメーションを後から書き足すと、回数は初期値の一に戻ってしまいます。
5:37個別の指定は、一括指定より後ろに書きましょう。
5:40ブラウザーを再読み込みして、一回だけの動きと見比べてみてください。
5:45違いははっきり分かるはずです。
5:47インフィニットを使うときの注意点です。
5:50ずっと動き続ける要素が画面にあると、文章を読む集中を妨げたり、見ていて疲れたりすることがあります。
5:58自動で動き続ける仕掛けには、止めるための操作を用意しておくのが親切な設計です。
6:04たとえばホバーやクリックでアニメーション・プレイ・ステートを一時停止に切り替える、
6:08といった方法があります。
6:12また、利用者の環境で「動きを減らす」設定が有効な場合は、メディアクエリで装飾的なアニメーションそのものを止める対応も、
6:18記事の例のように用意しておきましょう。
6:24特に、文章を読むページでは、視界のはしで何かが動き続けると、内容が頭に入りにくくなります。
6:31効かないときの確認です。
6:33まず前提として、キーフレームの名前と再生時間がなければ、繰り返す動き自体が存在しません。
6:39特に再生時間がゼロ秒のままだと、回数を増やしても目には見えません。
6:43次に順番を確認します。
6:45後から書かれた一括指定が、回数を初期値の一に戻しているかもしれません。
6:50開発者ツールでは、スタイルズで宣言に取り消し線が付いていないか、コンピューテッドで最終的な値を確認します。
6:57あわせて、ディレイの待ち時間中は、まだ始まっていないだけという場合もあるので、
7:01少し待ってから観察することも大切です。
7:06また、対象の要素とは別のクラスが、回数を上書きしていることもあります。
7:11セレクターの詳細度も含めて確認しましょう。
7:13最後に基本情報をまとめます。
7:16初期値は一、継承はしません。
7:18ブラウザーの対応も広く、クロームは四三以降、エッジは一二以降、ファイアフォックスは一六以降、
7:22サファリは九以降で使えます。
7:27練習として、同じ動きに一、二、インフィニットの三つを設定し、印象の違いと、
7:32全体の再生時間がどう変わるかを言葉で説明してみてください。
7:37回数は地味な指定ですが、動きのしつこさを決める大事なツマミです。
7:42次回は、一回分の再生時間を決める、アニメーション・デュレーションを取り上げます。
7:48これで、アニメーションの回数・進み方・待ち時間をそろって扱えるようになりました。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

animation-iteration-countの役割と主な指定値を解説。読み込み時の動きが1回か2回かを比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのanimation-iteration-countの使い方：指定値・実例・効かない原因とブラウザー互換性 →