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の繰り返し方法でした。
