【CSS】animation-iteration-countプロパティの使い方を徹底解説！！

こんにちは。

CSS3のアニメーションを勉強していると、状況によってはアニメーションの反復回数を変えたい時ってありませんか？

通常は1回再生して停止しますが、2回、3回、またはループさせたりと…

そんな希望に応えるプロパティはanimation-iteration-countプロパティです！！

そこで今回は入門者向けにanimation-iteration-countプロパティの

について徹底解説します！

animation-iteration-countとは

animation-iteration-countの読み方

animation-iteration-countは「アニメーション イテレーション カウント」と読みます。

iterationとは、日本語で「反復」を意味します。animation-iteration-countプロパティの意味はまさに英語の通りで、アニメーションの反復回数を設定するプロパティになります。

覚えやすいですね！！

animation-iteration-countはアニメーションを何回繰り返して再生させるのかを設定するプロパティ

animation-iteration-countプロパティの用途をもう一度詳しく言うと、

です。

animation-iteration-countプロパティの値を変えることによって、任意の回数分アニメーションを反復させることができます。

animation-iteration-countで利用できる値

animation-iteration-countプロパティでは以下の値を使うことができます。

対応ブラウザ

対応ブラウザは以下の通りです。

animation-iteration-countの基本的な使い方

それではanimation-iteration-countプロパティの使い方をサンプルコードと一緒にみていきましょう。

まず前提として、animation-iteration-countプロパティはキーフレームで設定したアニメーションを実行する際に動作するので、通常は「animation-name」や「animation-duration」などの「animation-」関連のプロパティと併用して使用します。

See the Pen
animation-iteration-count–1 by ryuga (@ryuga)
on CodePen.

サンプルコードでは、animation-iteration-countを「2」と設定しています。

そのため、円の背景色が赤→青になるアニメーションを2回繰り返して停止するのが分かると思います。

このように、animation-iteration-countプロパティを指定することによって、アニメーションの繰り返し回数を任意で設定することができます。

アニメーションをループさせる

状況によっては、アニメーションを1回だけでなく、ユーザーがWebサイトを開いている限り無限にループさせたい時ってありますよね。

CSS3のアニメーションが開発される前までは、JavaScriptというプログラミング言語でこれを制御していたのですが、現在はCSSだけで、それもanimation-iteration-countプロパティに値を設定するだけでこれを実装できるようになりました。

animation-iteration-countプロパティを使って、アニメーションを無限にループさせるには値に「infinite」を指定します。

See the Pen
animation-iteration-count–infinite by ryuga (@ryuga)
on CodePen.

また、animation-directionプロパティの値を「alternate」にすることによって、アニメーションのループに比較的違和感のないように演出することもできます。

まとめ

いかがでしょうか？

今回はanimation-iteration-countプロパティの基本的な使い方から、現場でよく使うアニメーションをループさせる方法を解説していきました。

CSSアニメーションはJavaScriptで実装する同程度のアニメーションよりも軽量であるため、今後もより普及していく技術だと考えられています。

みなさんもこの機会にanimation関連のプロパティの使い方をマスターして、CSS3のアニメーションを実装できるようにしましょう！！

参考文献：http://www.htmq.com/css3/animation-iteration-count.shtml