【CSS】アニメーションで繰り返しごとに間隔を空ける方法

という方に向けて「CSSのアニメーションで繰り返しごとに間隔を空ける方法」をまとめました。

初学者の備忘録ゆえ至らない点もあると思いますが参考になれば幸いです⸝⸝- ̫ -⸝⸝

「間隔を空ける」とは?

animationプロパティ

CSSではanimationプロパティを使ってアニメーションをつけることができます。

うちのくるみちゃんのパチモンに動いてもらいましょう。

.kurumi{
  animation: kurumi_move 2s linear 0s infinite;
  margin-left:0;
}
@keyframes kurumi_move{
  0%{transform:scale(1.0,1.0) translateY(0px);}
  20%{transform:scale(1.1,0.9) translateY(40px);}
  40%{transform:scale(1.0,1.0) translateY(0px);}
  60%{transform:scale(1.1,0.9) translateY(40px);}
  80%{transform:scale(1.0,1.0) translateY(0px);}
  100%{
    transform:scale(1.1,0.9) translateY(40px);
    margin-left:80%;
  }
}

繰り返しごとに間隔を空けたい

ではこのように繰り返しの度に1秒待ってから動き出すようにしたい場合はどうすればいいでしょう。

それが今回の主題である「アニメーションで繰り返しごとに間隔を空ける」ということです。

animation-delayプロパティでは繰り返せない

.kurumi2{
  animation: kurumi_move 2s linear 1s infinite;
  margin-left:0;
}

animation-delayを指定すると、その時間分アニメーションの開始を遅らせることができます。

あれ。1秒待ってくれるのは一回目限りで、それ以降のループでは待たずにビュンビュン動いちゃってます。

animation-delayはあくまで「一回目の開始を遅らせる」だけであって、二回目以降は遅延が発生しません。

手順

ステップは大きく分けて2つ。

(CSS)アニメーションで繰り返しごとに間隔を空ける方法

空けたい間隔の時間を決め計算する

少しだけ計算をする必要があります。

この値をキーとでも呼びましょうか。このキーを求めておけばお茶の子さいさいです。

例えば今回はこのように1秒間待った後に(2秒間)動かすとする場合、

空けたい間隔の時間は1秒でアニメーションの総時間は3秒なので、キーは1/3になります。

keyframesをいじる

今回やることは単純。keyframesの中で何も行わない時間を作ります。

タイミング(%)を調整

@keyframes kurumi_move{
  20%{transform:scale(1.1,0.9) translateY(40px);}
  40%{transform:scale(1.0,1.0) translateY(0px);}
  60%{transform:scale(1.1,0.9) translateY(40px);}
  80%{transform:scale(1.0,1.0) translateY(0px);}
  100%{transform:scale(1.1,0.9) translateY(40px); margin-left:80%;}
}

次にkeyframesをいじります。

先ほどの手順で得たキーありましたよね。それを使い次の計算を行います。

上でやった例の場合、1/3だったので100*1/3≒33ですね。

そこで、このように最初のタイミングをその計算結果にしてあげます。

@keyframes kurumi_move2{
  33%{(省略)}
　　　　・
　　　　・
　　　　・
 }

こんな感じ。

で求めます。
うちのアニメーションの場合、ちょうど20%ずつ区切って指定していたので20*(1-1/3)=20*2/3≒13です。

@keyframes kurumi_move2{
  33%{}
  46%{...}
  59%{...}
  72%{...}
  85%{...}
  100%{...}
}

なのでこのように33に13を足していくように指定してあげればOK。

しかしこのままではまだ間隔ができておらず、最初のタイミング(上で言う33%)までに動いてしまいます。

なので次は、最初のタイミングまで何も行わないようにプロパティを指定していきます。

keyframesのプロパティを調整

最初のタイミングのプロパティ達の値をデフォルトのものにしてあげます。

例のアニメーションの場合「transform」「margin-right」の値を変化させて動かしていたので、それらの値をデフォルトの状態にしてあげます。

@keyframes kurumi_move2{
  33%{transform:scale(1.0,1.0) translateY(0px); margin-left:0;}
   ・
   ・
   ・
}

要はこんな感じ。ウチの場合は元の画像自体に何も指定してなかったのでそれぞれ0にしてあげます。

すると…

繰り返しごとに間隔ができましたね！ちゃんと止まってる！

これで完成です⸝⸝- ̫ -⸝⸝

まとめ

参考になれば幸いです！では⸝⸝- ̫ -⸝⸝