【CSS】アニメーションする回数を指定するanimation-iteration-count

きなこ

アニメーションが一回で終わってしまうんだけどずっと再生することってできないの？

こばゆた

animation-iteration-countプロパティというちょっと長い名前のプロパティで指定する事ができるよ

今回の内容

1.animation-iteration-count
2.animation-directionと使う場合
3.まとめ

1.animation-iteration-count

animation-iteration-countプロパティはアニメーションを動かす回数を指定することのできるプロパティです。

値には繰り返したい回数またはキーワードが入ります。

セレクター{
  animation-iteration-count: 数字またはキーワード;
}

こばゆた

では順番に見ていきましょう

1.回数で指定

.car{
  animation-iteration-count: 3; /*アニメーションを3回繰り返す*/
}

ボタンのon / offで切り替わります

on / off

値を”3″にしたので3回繰り返しています。

/*keyframesの設定*/
@keyframes translate{
  100%{
    transform: translateX(200px); /*100%の時にX軸に200px移動する*/
  }
}

/*アニメーションの設定*/
.car{
  animation-name: translate; /*keyframesの名前は"translate"*/
  animation-duration: 1s; /*アニメーションの時間は1秒*/
  animation-iteration-count: 3; /*アニメーションを3回繰り返す*/
}

2.キーワードで指定

値を”infinite”とするとアニメーションをずっと続ける事ができます。

.car2{
  animation-iteration-count: infinite; /*アニメーションを無限に繰り返す*/
}

ボタンのon / offで切り替わります

on / off

/*keyframesの設定*/
@keyframes translate{
  100%{
    transform: translateX(200px); /*100%の時にX軸に200px移動する*/
  }
}

/*アニメーションの設定*/
.car2{
  animation-name: translate; /*keyframesの名前は"translate"*/
  animation-duration: 1s; /*アニメーションの時間は1秒*/
  animation-iteration-count: infinite; /*アニメーションを無限に繰り返す*/
}

3.半端な数

また回数を少数点で指定すると小数点分の回数もアニメーションを再生してくれます。

.car3{
  animation-iteration-count: 3.5; /*アニメーションを3.5回繰り返す*/
}

ボタンのon / offで切り替わります

on / off

分かり易いように値を3.5としましたが、きちんと3回と半分で終わっています。

/*keyframesの設定*/
@keyframes translate{
  100%{
    transform: translateX(200px); /*100%の時にX軸に200px移動する*/
  }
}

/*アニメーションの設定*/
.car3{
  animation-name: translate; /*keyframesの名前は"translate"*/
  animation-duration: 1s; /*アニメーションの時間は1秒*/
  animation-iteration-count: 3.5; /*アニメーションを3.5回繰り返す*/
}

2.animation-directionと使う場合

animation-directionと同時に使う際はその数え方に注意です。

animation-directionについてはこちら

ボタンのon / offで切り替わります

box

on/off

/*keyframesの設定*/
@keyframes direction{
  0%{
    transform: none;
  }
  60%{
    transform: translateX(200px);
  }
  100%{
    transform: translateX(200px) rotate(360deg);
  }
}

/*アニメーションの設定*/
.boxD{
  animation-name : direction; /*keyframesの名前は"direction"*/
  animation-duration: 2s; /*アニメーションの時間は2秒*/
  animation-iteration-count: 3; /*アニメーションの回数を3回*/
  animation-fill-mode: forwards; /*アニメーション終了時はその場に留まる*/
  animation-direction: alternate; /*アニメーションを逆から再生し、終了時に折り返す*/
}

animation-directionとanimation-iteration-countを併用した時の図

3.まとめ

animation-iteration-count まとめ

アニメーションの回数を指定できる
値には回数または”infinite(無限)”を入れる
回数は小数点で指定することもできる

セレクター{
  animation-iteration-count: 数字またはキーワード;
}

ボタンのon / offで切り替わります

3回

infinite

3.5回

3.7回

on/ off

/*上から*/
.boxA{
   animation-iteration-count: 3; /*アニメーションを3回繰り返す*/
}

.boxB{
   animation-iteration-count: infinite; /*アニメーションを無限に繰り返す*/
}

.boxC{
   animation-iteration-count: 3.5; /*アニメーションを3.5回繰り返す*/
}

.boxD{
   animation-iteration-count: 3.7; /*アニメーションを3.7回繰り返す*/
}