スキップしてメイン コンテンツに移動

CSSのアニメーションで幾らか間隔を空けながら繰り返すマークアップ

自分の写真結城永人 -

CSSのアニメーションで動きを止めるのはanimation-delayで、繰り返して動かすのはanimation-iteration-countだけれどもそれらを組み合わせても幾らか間隔を空けながら繰り返すことはできない。

というのはanimation-delayはアニメーションが始まるまでの時間を取っているだけだからだ。最初の動きが終わって二回目以降の動きが始まる直前には関与しないし、止めることはできないものなんだ。

動きに間隔を空ける@keyframesの使い方

スニーカーを履いた足が車の窓から少し上向きに出てぶら付いている

繰り返しの途中で止まって見える、または繰り返さなくてもそのように一回だけ動く間に表現するにはCSSアニメーションの流れを指定する@keyframesを使うのが相応しい。

CSS の @keyframes @-規則は、アニメーションの流れに沿ったキーフレーム (または中間地点) のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。これにより、アニメーションの中間ステップを CSS トランジションよりも詳細に制御できます。

@keyframes｜MDN

@keyframesはある時点から別の時点まで間隔を取って動きを変えられるものなので、一つの間隔で同じ状態を維持するように記載すれば止まって見えるようになるんだ。

幾らか間隔を取って繰り返すサンプル

🐑

HTML

<div class="sheep">🐑</div>

CSS

.sheep {width:min(92.5%, 901px);font-size:x-large;animation:sheep 5s infinite}
@keyframes move {
0% {transform:translateX(0)}
25% {transform:translateX(50%)}
75% {transform:translate(50%)}
100% {transform:translateX(100%)}}

止めるときに大事なのは同じ状態を保つために必ず同じ記述を連続して記述する。

サンプルでは20%と60%が両方とも「transform:translateX(50%)」（水平方向に領域の半分を移動する）で連続して同じになっている。それぞれの割合の間、同じ状態を保ち続けるから止まって見えることになる。

アニメーションの長さはanimation-durationで決められる。サンプルでは5s（五秒）に指定されている。70%から20%を引いた50%の分だけ同じ状態を維持するとすると五秒の五割の二秒半が止まって見える時間になる。

静止と動作の時間の計算式

アニメーションの間隔を空けて静止する時間はアニメーションの長さに対して@keyframesで同じ状態を維持する割合（二つの共通の記述の割合の差）から算出される。

静止する時間＝同じ状態の割合÷100×アニメーションの長さ

サンプルのソースコードでは「50÷100×4」から「2」が静止する時間になる。

CSSのアニメーションの長さを指定するanimation-durationは秒を単位とするから静止する時間も秒で求められる。

同じ長さの一秒と二秒と四秒の間隔のサンプル

🐦
🐸
🐞

注意しなくては行けないのは@keyframesで静止してアニメーションに間隔を空けると残りの部分のアニメーションの速度が変わってしまう。

アニメーションの長さが変わらないかぎり、静止する時間が長いほどに残りの部分の速度が上がる。動かない部分があると終了時間に対してもっと急いで追い付かなくてはならなくなるためだ。

動作の時間＝アニメーションの長さ－制止する時間

全体の割合からいうと動きの速度は短いほどに速くなり、長いほどに遅くなるけど、ただし指定される動きの量も加味すると事情は異なるかも知れない。例えば短い時間の一回転と長い時間の二回転では回転として前者がいつも後者よりも速いとはかぎらず、どちらが速いかは入れ替わり得る。要する時間が同じならば動きの量が多いと速くなり、少ないと遅くなる場合も出て来るので、一括りには捉えられない。

CSSのアニメーションの動きの速度はアニメーションの長さと全体の動きの割合と動きの量の三つで決まる。

アニメーションを一定の速度で間隔を空けながら繰り返す場合は@keyframesの前半と後半を50%に分けてそれぞれに止めるのと動かすのを指定するのが簡単だ。

二秒の間隔で同じ速度で繰り返すサンプル

🐧

HTML-

<div class="penguin">🐧</div>

CSS

.penguin {width:min(92.5%, 901px);font-size:x-large;animation:penguin 5s infinite}
@keyframes penguin {
0% {transform:translateX(0)}
50% {transform:translateX(0)}
100% {transform:translateX(100%)}}

@keyframesの「0%」から「50%」の内容を同じにすると全体の前半の半分が止まり、「100%」だけ変えると全体の後半の半分が動く。

ただし間隔を空けない通常の場合と比べるとどこで止めてもその分だけアニメーションの速度が上がるのは変わらない。

通常の速度の時間＝アニメーションの長さ＋制止する時間

アニメーションを途中で止める場合、何もしないときと同じ速度を保つにはアニメーションの長さを制止する時間の分だけ加える必要がある。

コメント

コメントを投稿