CSS animationの繰り返し方法

CSS3からanimationが使えるようになり、サイト上に複雑な動きをつけられるようになりました。

こちらの記事で動きのつけ方を説明しました。
CSSのanimationのkeyframesの使い方【サンプルあり】

animationの良さの一つにアニメーションを繰り返せることがあります。

そんなanimationの繰り返し方法を説明します。

結論

animation-iteration-countを指定しましょう。

繰り返さない場合

animation-iteration-countを指定しないか、1を指定します。

一定回数繰り返す場合

animation-iteration-countに繰り返し回数を整数で指定します。

無限に繰り返す場合

animation-iteration-countにinfiniteを指定します。

　

なお、CSSで指定するとき（animation-iteration-count含め）animationは1行で指定できます。

animation 1行指定例

animation: anime1 5s ease -2s 3 alternate

上記のように指定されていればその中の「s」がついていない整数が animation-iteration-count です。

繰り返さない場合

マウスを乗せたとき1回点滅します。

CSS

animation: ugoki 1s linear;

animation-iteration-countの初期値は1です。
つまり繰り返しについて何も指定しないとアニメーションは1回実行したら終わります。

一定回数繰り返す場合

マウスを乗せたとき3回点滅します。

CSS

animation: ugoki 1s linear 3;

animation-iteration-countでは整数を指定できます。

上記の場合は3回繰り返したいので「3」を指定しています。

無限に繰り返す場合

マウスを乗せたとき無限に点滅します。

CSS

animation: ugoki 1s linear infinite;

無限に繰り返すには animation-iteration-countにinfiniteを指定します。

まとめ

繰り返さない場合

animation-iteration-countを指定しないか、1を指定します。

一定回数繰り返す場合

animation-iteration-countに繰り返し回数を整数で指定します。

無限に繰り返す場合

animation-iteration-countにinfiniteを指定します。

以上、CSS animationの繰り返し方法でした。