CSSのアニメーションで幾らか間隔を空けながら繰り返すマークアップ
CSSのアニメーションで動きを止めるのはanimation-delayで、繰り返して動かすのはanimation-iteration-countだけれどもそれらを組み合わせても幾らか間隔を空けながら繰り返すことはできない。 というのはanimation-delayはアニメーションが始まるまでの時間を取っているだけだからだ。最初の動きが終わって二回目以降の動きが始まる直前には関与しないし、止めることはできないものなんだ。 動きに間隔を空ける@keyframesの使い方 繰り返しの途中で止まって見える、または繰り返さなくてもそのように一回だけ動く間に表現するにはCSSアニメーションの流れを指定する@keyframesを使うのが相応しい。 CSS の @keyframes @-規則は、アニメーションの流れに沿ったキーフレーム (または中間地点) のスタイルを定義することによって、一連の CSS アニメ…
