などの疑問や悩みを解決してまいります。
CSSアニメーションを実装したものの、一度再生されたらそこで停止してしまう状態をどうにかしたいと思っている方もいるのではないでしょうか。
今回はCSSアニメーションを繰り返し表示させる方法について解説していきます。
本記事の目次
animation-iteration-count: infinite;を使用する
解決方法は、animation-iteration-count: infinite;を指定してあげることでアニメーションを繰り返し再生することができます。
animation-iteration-count: infinite;animation-iteration-count プロパティは、CSSアニメーションが繰り返し再生される回数を設定するためのプロパティです。
上記で紹介している値のinfiniteは日本語で「無限」を意味します。
なので際限なく繰り返しアニメーションを再生することになります。
以下が実装例です。
See the Pen rotateZ()関数の使い方（@keyframeとanimationプロパティ） by koutarou mori (@koutarou-mori) on CodePen.
このように繰り返し要素が回転しているのがわかるかと思います。
animation-iteration-count プロパティは以下の値が指定可能です。
| 値 | 内容 |
|---|---|
| infinite | 無限に繰り返す |
| 正の整数 | 特定の回数を繰り返す |
animation-iteration-countプロパティを指定しない場合はアニメーションは一度のみ再生されます。
animation-iteration-count: infinite;を指定した実装例
ここからはanimation-iteration-count: infinite;を指定した実装例を何個か紹介していきます。
animation-iteration-count: infinite;を使用することで様々なアニメーションを表現することができます。点滅アニメーション
要素を表示と非表示を繰り返すことで点滅のようなアニメーションを作ることができます。
以下では@keyframesでopacity: 0;とopacity: 1;をanimation-iteration-count: infinite;で繰り返し再生することで点滅アニメーションを実装しています。
See the Pen 点滅アニメーション by koutarou mori (@koutarou-mori) on CodePen.
移動アニメーション
要素にtransformプロパティのtranslate()関数を指定することで移動アニメーションを作ることができます。
@keyframesでtransform: translateX(0);とtransform: translateX(100%);をanimation-iteration-count: infinite;で繰り返し再生させて要素を往復させています。
See the Pen 移動アニメーション by koutarou mori (@koutarou-mori) on CodePen.
色変化アニメーション
色の変化をアニメーションで実装することができます。
今回はテキストの色を変化させたいので、@keyframesにcolorプロパティを12.5%毎に別の色を指定しています。
See the Pen 色変化アニメーション by koutarou mori (@koutarou-mori) on CodePen.
拡大収縮アニメーション
要素の拡大、縮小を繰り返すアニメーションを作ることも可能です。
@keyframesにtransformプロパティのscale()関数を指定することで拡大縮小アニメーションを実装することができます。
See the Pen 拡大縮小アニメーション by koutarou mori (@koutarou-mori) on CodePen.
本記事のまとめ
今回はアニメーションを繰り返し再生する方法について解説しました。
指定がないと一回再生されるだけで停止してしまうので、animation-iteration-countプロパティを指定するだけで簡単にアニメーションの再生回数を制御できますので、ぜひ参考にしてみてください。
ここまで読んでいただきありがとうございました。
