どうもおはようポテト(@ohayoupoteto22)です。
CSSのアニメーションで毎回最初だけ静止させたい…
ということで今回は
「CSSのアニメーションで繰り返しごとに最初だけ静止させたい…」
「animation-delayを使っても遅延させられないんだけど…」
という方に向けて「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を指定すると、その時間分アニメーションの開始を遅らせることができます。
ソロモン
が、上のようにanimation-delayの値を1sにしてみると…
あれ。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をいじります。
先ほどの手順で得たキーありましたよね。それを使い次の計算を行います。
(キー) × 100
上でやった例の場合、1/3だったので100*1/3≒33ですね。
そこで、このように最初のタイミングをその計算結果にしてあげます。
@keyframes kurumi_move2{
33%{(省略)}
・
・
・
}こんな感じ。
ソロモン
次に、それ以降のタイミングは
(元のタイミングの間隔) × {1-(キー)}
@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にしてあげます。
すると…
繰り返しごとに間隔ができましたね！ちゃんと止まってる！
これで完成です⸝⸝- ̫ -⸝⸝
ソロモン
JavaScriptなどでこのように繰り返しごとに間隔を設けることもできますが、CSSだけでできるこっちの方が魅力的かも?
参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
