animation-iteration-countでアニメーションの実行回数を指定【CSS】

animation-iteration-countプロパティは、アニメーションを実行する回数を指定するプロパティです。

{animation-iteration-count: 実行回数;}

何も指定していないと、アニメーションは1回で止まるのですが、このプロパティで再生する回数を指定できますし、何回も繰り返しアニメーションを実行することもできます。

animation-iteration-countの値の指定方法

animation-iteration-countプロパティでは、以下のような値を指定できます。

infiniteを指定すると、アニメーションは制限なく何回も繰り返されます。

.animation-ex {
　animation-name: ex-animation;
　animation-iteration-count: infinite;
}

@keyframes ex-animation {
　0%{width: 50px;height: 70px;}
　100px{width: 200px;height: 70px;}
}

上の赤いボックスは、幅が50pxから200pxに変化するアニメーションが何回も繰り返し実行されるようにしています。

数値を指定すると、指定した回数だけアニメーションは繰り返されます。

小数点以下の数値で指定すると途中まで再生されます。